使两个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/中看到的那样，结果是孩子们溢出了包装器：

如何让它们适应空间？可悲的是，这种情况没有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。

Answer 2

你所描述的基本上是一个边界。那么为什么不使用带有background-clip的CSS border属性呢？只是不要忘记适当的供应商前缀。

http://jsfiddle.net/NTE2Q/8/

.wrap {
    background-color: red;
    white-space:nowrap;
    width:300px;
}
.element {
    background:#009; color:#cef; text-align:center;
    display:inline-block;
    width:50%;
    border:4px solid rgba(0,0,0,0);
    box-sizing: border-box;
    background-clip: padding-box;
}

Answer 3

上述所有技术都没有为我提供足够的跨浏览器。我发现使用display:table-cell稍微不同的技术允许我将2个或更多元素放在一起。 Here is an example of it in action。

CSS：

    display:table-cell;
    background:#009; color:#cef; text-align:center;
    width:22%; /*Set percentage based on # of elements*/
    border:4px solid rgb(255,0,0);/*no longer need background to be red, just make border red*/

您甚至不再需要包装器，因为div现在被视为<td>。

Answer 4

虽然我强烈建议尽可能使用Phorgz的calc()技术，但我也想提出一种老式的方法，只使用一个包装器和position: relative来实现效果。

.two-blocks-by-side（）LESS Mixin：

.two-blocks-by-side(@padding) {
  padding: @padding (@padding + @padding / 2);
  font-size: 0;

  & > div {
    position: relative;
    display: inline-block;
    font-size: initial;
    width: 50%;

    &:first-child { left: -1 * @padding / 2 };
    &:last-child { right: -1 * @padding / 2 };
  }
}

JS Bin example