How to Create a Fluid Layout with Equally Spaced DIVs Using CSS?

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><p>The stretch element ensures that the DIVs are distributed evenly and responsively across the fluid container.</p></div>

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!