我想要两个元素占据父母宽度的百分比，但是我们也需要将他们分开的边距。我有以下标记：
<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。
解决方法
技术#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在边。
