CSS Implementation of Evenly Spaced DIV Elements in Fluid Width Containers

Introduction

In responsive web design, achieving fluid layouts is a common requirement. This article addresses the specific scenario of evenly distributing multiple DIV elements within a fluid width container, offering a stable and reliable CSS implementation.

Problem Analysis

The original requirement involves placing four fixed-size DIV elements in a fluid width container, with the first element left-aligned, the last element right-aligned, and the middle two elements evenly distributed within the remaining space, with all spacing adapting to container width changes.

Core Solution

Basic Principles

Utilizing the text-align: justify property combined with inline-block elements to achieve text justification effects, triggered by adding a placeholder element for complete alignment behavior.

Complete Code Implementation

<style>
#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  min-width: 612px;
}

#container > div {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

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

#container > div:nth-child(odd) {
  background: #ccc;
}

#container > div:nth-child(even) {
  background: #0ff;
}
</style>

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <span class="stretch"></span>
</div>

Key Technical Points Analysis

Text Alignment Mechanism

The text-align: justify property, originally designed for text justification, when applied to containers containing inline-block elements, can achieve uniform horizontal distribution of elements. Combined with text-justify: distribute-all-lines, it optimizes the alignment effect.

Inline-Block Element Characteristics

Setting DIV elements to display: inline-block maintains their block-level dimension control while enabling inline element horizontal arrangement. IE6/7 compatibility is addressed through *display: inline and zoom: 1.

Role of Placeholder Element

The .stretch element, with width set to 100%, ensures all available space within the container is occupied, triggering the complete alignment effect of text-align: justify.

Browser Compatibility Optimization

This solution works reliably in IE6+ and all modern browsers. Specific handling for IE6 includes:

• Using *display: inline to fix inline-block display issues
• Triggering hasLayout via zoom: 1
• Setting font-size: 0 and line-height: 0 to eliminate extra spacing in IE6

Alternative Approaches

:after Pseudo-element Optimization

The CSS :after pseudo-element can replace the additional <span> element:

#container:after {
  content: '';
  width: 100%;
  display: inline-block;
}

This method reduces HTML structure redundancy but lacks support in IE6/7, though these browsers can use distribute-all-lines as a fallback.

Flexbox Modern Solution

Using CSS Flexbox provides a more concise implementation:

#container {
  display: flex;
  justify-content: space-between;
}

The Flexbox approach offers cleaner and more intuitive code but has relatively newer browser support, requiring consideration of compatibility with older versions.

Practical Application Recommendations

When selecting specific implementation approaches, comprehensive project requirements should be considered:

• For supporting legacy browsers like IE6-8, the text-align: justify-based solution is recommended
• For modern browser environments, Flexbox is the superior choice
• In production environments, combining CSS preprocessors and autoprefixer tools is advised for managing browser compatibility

Conclusion

This article details multiple technical solutions for achieving evenly distributed elements in fluid containers, with emphasis on stable implementations using traditional CSS properties. By deeply understanding text alignment mechanisms and inline-block element characteristics, developers can flexibly address various layout requirements, providing strong support for creating responsive, compatibility-robust web interfaces.