使两个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的calc()长度,您可以通过设置.elementto 的宽度来实现:

.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.