Home > Article > Web Front-end > How to Align Divs Horizontally Within a Container with Fixed Dimensions?
Question:
I need to align divs horizontally within a container, but I'm facing issues where overflowed elements break down to the next line despite the parent's limited height. Achieving the desired layout through inline elements is not an option.
Solution:
To align divs horizontally and prevent the overflow issue, consider adding an inner div within the container that has a width sufficient to accommodate all floated divs. Here's a code example for this solution:
#container { background-color: red; overflow: hidden; width: 200px; } #inner { overflow: hidden; width: 2000px; } .child { float: left; background-color: blue; width: 50px; height: 50px; }
<div>
The above is the detailed content of How to Align Divs Horizontally Within a Container with Fixed Dimensions?. For more information, please follow other related articles on the PHP Chinese website!