How to Create a Fluid-Width Container with Evenly Spaced DIVs?

Fluid Width with Evenly Spaced DIVs

A user seeks to create a fluid-width container DIV with four child DIVs of equal dimensions (300px x 250px). The requirement is for the first DIV to float left, the last to float right, and the remaining two to be spaced evenly between them, while maintaining responsiveness.

Solution:

Consider the following CSS and HTML implementation:

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

<div>
<p><strong>Explanation:</strong></p>
<ul>
<li>The #container DIV utilizes text-align: justify and display: inline-block properties to justify the child DIVs.</li>
<li>Inline-block is supported in modern browsers, but to ensure cross-browser compatibility, we use display: inline with zoom: 1 for IE6/7.</li>
<li>In IE6, inline-block elements are not properly spaced, so a width of 100% with font-size: 0 and line-height: 0 fixes this issue.</li>
<li>A span element with the class "stretch" fills in the remaining space in the container to distribute the DIVs evenly.</li>
<li>The child DIVs are set to the desired dimensions and given specific background colors for demonstration purposes.</li>
</ul>
</div>

The above is the detailed content of How to Create a Fluid-Width Container with Evenly Spaced DIVs?. For more information, please follow other related articles on the PHP Chinese website!