如何使用可变宽度获得三个间距相等的 div？答案

【问题标题】：How can I get three divs with equal spacing between them using variable width?如何使用可变宽度获得三个间距相等的 div？
【发布时间】：2011-07-12 07:48:32
【问题描述】：

我正在设计一个带有联系表单的网页，您可以看到here。

如您所见，页面设计为可变宽度。我希望图像、表单和内容区域的边缘之间的间距相等，即有四个宽度相等的空间。

目前我已将其设计为图像居中在宽度为 20% 的 DIV 中，联系表格居中在宽度为 60% 的 DIV 中。这工作正常，但不是很好，因为随着浏览器宽度的增加，联系表单和图像之间的间距大于图像和内容区域边缘之间的间距。我想找到一种保持所有空间等宽的方法。

这里是相关的 CSS：

#box {
    width: 100%;
    min-width: 800px;
}

#left {
    float: left;
    width: 20%;

}

#center {
    float: left;
    height: 100%;
    width: 60%;
}

#right {
    height: 100%;
    margin-left: 80%;
}

.dharma {
    width: 185px;
    margin: 0px auto 0;
    padding-top: 25px;
}

#contact-form {
    width: 471px;
    margin: 25px auto;
}

这里是相关的 HTML：

<div id="box">

<div id="left">
<div class="dharma"><img src="images/dharma.jpg"></div> 
</div>

<div id="center">
<div id="contact-form">
[form HTML]
</div>
</div>

<div id="right">
<div class="dharma"><img src="images/dharma.jpg"></div>
</div>

</div>

有人可以帮忙吗？

谢谢，

尼克

【问题讨论】：

标签： css spacing variable-width

【解决方案1】：

您描述的问题非常适合在 Chrome、Safari 和 Firefox 中使用的 CSS3 灵活框布局。您只需要：

#box {
    display: -moz-box;
    display: -webkit-box;
    display: box;
}

#left, #center, #right {
    -moz-box-flex: 1.0;
    -webkit-box-flex: 1.0;
    box-flex: 1.0;
}

不幸的是，这在 IE 中不起作用，但我希望这仍然有帮助。

【讨论】：

谢谢。它在 Chrome 和 Safari 中运行良好，但在 Firefox 中没有间距。如果它也可以在 Opera 中工作，因为目前还不行，#left、#center、#right DIV 会在#box DIV 的中心相互堆叠

【解决方案2】：

简单地设置一个规则让所有的盒子都有一个额外的边距不起作用吗？

类似这样的：

#box {
    width: 100%;
    min-width: 800px;
}

#left, #center, #right { /* adds spacing between columns of equal size */
    margin: 0 2%;
}

#left {
    float: left;
    width: 16%;  /* reduced by 4% for margins */

}

#center {
    float: left;
    height: 100%;
    width: 56%; */ reduced by 4% for margins */
}

#right {
    height: 100%;
    margin-left: 80%;
}

【讨论】：