Fluid Width with Equally Spaced DIVs
To achieve fluid layout with equally spaced DIVs, the following approach can be employed:
CSS
#container { text-align: justify; -ms-text-justify: distribute-all-lines; text-justify: distribute-all-lines; }
This sets the text alignment to "justify," causing the content to be distributed evenly across the available width.
.box1, .box2, .box3, .box4 { display: inline-block; vertical-align: top; }
By setting display: inline-block, the DIVs will behave as inline elements, flowing horizontally within the container.
.stretch { width: 100%; display: inline-block; font-size: 0; line-height: 0 }
A "stretch" element is added to fill the remaining space and push the DIVs to their desired positions. Clearing the font and line height helps in some browsers.
HTML
<div>
The stretch element ensures that the DIVs are distributed evenly and responsively across the fluid container.
The above is the detailed content of How to Create a Fluid Layout with Equally Spaced DIVs Using CSS?. For more information, please follow other related articles on the PHP Chinese website!