我想要两个元素占据父母宽度的百分比,但是我们也需要将他们分开的边距。我有以下标记:
<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在边。