html - 让两个 CSS 元素并排填充它们的容器，并留有边距

Question

我希望两个元素占据父级宽度的精确百分比，但我还需要它们的边距将它们分开。我有以下标记:

<div class='wrap'>
  <div class='element'>HELLO</div><div class='element'>WORLD</div>
</div>​

.wrap {
  background:red;
  white-space:nowrap;
  width:300px;
}
.element {
  background:#009; color:#cef; text-align:center;
  display:inline-block;
  width:50%;
  margin:4px;
}

正如您在 http://jsfiddle.net/NTE2Q/ 中看到的那样结果是 children 溢出了包装:

如何让它们适应空间？可悲的是，没有 box-sizing:margin-box对于这种情况。

Answer 1

技术 #1 - 现代 CSS3 calc()

使用 CSS3's calc() length ，您可以通过将 .element 的宽度设置为:

.element {
  width: 49%;                     /* poor approximation for old browsers    */
  width: calc(50% - 8px);         /* standards-based answer for IE9+, FF16+ */
  width: -moz-calc(50% - 8px);    /* support for FF4 - FF15                 */
  width: -webkit-calc(50% - 8px); /* support for Chrome19+ and Safari6+     */
}

演示:http://jsfiddle.net/NTE2Q/1/

^{参见 http://caniuse.com/calc有关哪些浏览器和版本支持此功能的详细信息。}

---

技巧#2 - 老派包装

可以通过堆积多个元素来进行计算。对于这种情况，我们将每个“元素”包装在一个 50% 宽但具有 4px 填充的包装器中:

<div class='wrap'>
  <div class='ele1'>
    <div class='element'>HELLO</div>
  </div><div class="ele1">
    <div class='element'>WORLD</div>
  </div>
</div>​

.ele1 {
    display:inline-block;
    width:50%;
    padding:4px;
    box-sizing:border-box;          /* Make sure that 50% includes the padding */
    -moz-box-sizing:border-box;     /* For Firefox                             */
    -webkit-box-sizing:border-box;  /* For old mobile Safari                   */
}
.element {
    background:#009; color:#cef; text-align:center;
    display:block;
}

演示:http://jsfiddle.net/NTE2Q/2/

---

技巧 #3 - 使用 (CSS) 表格

通过将包装器视为“表格”并将每个元素视为同一行中的单元格，可以得到相同的结果。这样，元素之间的空格就不重要了:

<div class='wrap'>
  <div class='element'>HELLO</div>
  <div class='element'>WORLD</div>
</div>​

.wrap {
    background:red;
    width:300px;
    display:table;
    border-spacing:4px
}
.element {
    background:#009; color:#cef; text-align:center;
    width:50%;
    display:table-cell;
}
​

演示:http://jsfiddle.net/NTE2Q/4/

请注意，最后一种技术会折叠两个元素之间的 4px 间距，而前两种技术会导致两个元素之间出现 8px 并在边缘出现 4px。