如何实现容器内四个DIV的流体宽度和均匀间距？

等距 DIV 的流体宽度

问题：

您有一个流体宽度容器DIV 具有四个 DIV，每个 DIV 都有固定的尺寸。如何将框 1 向左浮动，将框 4 向右浮动，并将框 2 和 3 均匀地放置在它们之间，并在浏览器窗口大小变化时保持流畅的间距？

**答案：

完整示例请参考提供的 JSFiddle： http://jsfiddle.net/thirtydot/EDp8R/

说明：

此解决方案利用多种技术来实现所需的布局：

• text-align: justify;: 这会水平对齐 DIV，在它们之间分配空间。
• .stretch: 宽度设置为 100% 的跨度。它会扩展以填充容器的剩余宽度。
• display:inline-block; *显示：内嵌； Zoom:1;: 确保 IE6/7 的内联块行为。
• font-size: 0; line-height: 0;: 防止 IE6 中 inline-block 造成的垂直空间。

通过组合这些技术，DIV 可以根据需要流畅地、均匀地间隔和浮动，而不管容器宽度。

以上是如何实现容器内四个DIV的流体宽度和均匀间距？的详细内容。更多信息请关注PHP中文网其他相关文章！