Question

我正在研究编写自己的网格系统，我有一个简单的问题。

如果我有两个半栏

例如

 .container {
      width: 100%;
 }

 .half-width {
      width: 50%;
      float: left;
 }

 <div class="half-width">a</div>
 <div class="half-width">b</div>

如何最好地调整一下，实际上每个容器之间有一些余量（第一个应该有一些边距，第二个理想情况下应该剩下一些边距？）或“天沟空间”？

这是否意味着将50％降低到更接近48％的水平？

http://jsfiddle.net/ejmczevw/2

Answer 1

试试这个。但是如果你想在框的边框之间放置一个空格，你需要将它们放入你的列div。

.container {
  width: 100%;
 }

.half-width {
    width: 50%;
    float: left;
    padding-left: 8px;
    padding-right 8px;
}

<div class="half-width">a</div>
<div class="half-width">b</div>

我在这里添加了一个例子 http://jsfiddle.net/g1yLpbwp/

Answer 2

您可以在两侧（右/左）给出填充

.container {
width: 100%;
}

.half-width {
-webkit-box-sizing:border-box;
box-sizing:border-box;
width: 50%;
float: left;
padding-left: 8px;
padding-right 8px;
}

或者你可以分别删除第一个和最后一个div的左右填充

.half-width:first-child {
padding-left: 0px;

}
.half-width:last-child {
padding-right 0px;
}

检查这是否有效。

流体柱之间的排水沟空间

2 个答案: