本文介绍了三种技术来通过CSS处理元素间的间距。第一种利用CSS3的calc()函数，第二种是通过元素包裹实现，第三种则是利用表格布局。calc()函数在现代浏览器中的支持情况可在caniuse.com查询。这些方法在不同场景下有不同的适用性和效果，例如calc()方法在某些情况下可能导致8px的总间距，而表格布局则会折叠间距。
技术#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://caniuse.com/calc。
技术#2 – 老式包装
可以通过堆积多个元素进行计算。对于这种情况，我们将每个“元素”包装在一个宽度为50％但包含4px的封装中：
.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;
}
技术#3 – 使用(CSS)表
通过将包装器作为“桌子”处理并将每个元件作为同一行中的单元格，可以得到相同的结果。有了这个，元素之间的空格并不重要：
.wrap {
background:red;
width:300px;
display:table;
border-spacing:4px
}
.element {
background:#009; color:#cef; text-align:center;
width:50%;
display:table-cell;
}
请注意，最后一个技术会折叠两个元素之间的4px间距，而前两种技术会导致8px出现在两个项之间，4px在边。
扫一扫
2732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
