Question

我在水平行中有4个div。我想在div之间放置空格（使用margin，我猜？），但是当我这样做时，div会溢出它们的父容器。

零保证金，他们很好地排在一条线上：

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div>
  <div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div>
</div>

现在，当我引入5px的边距时，最后一个按钮会换行：

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div>
  <div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div>
</div>

我想这是因为宽度属性（百分比）没有考虑元素总宽度的余量？什么是正确的方法？

由于

Answer 1

可能的想法是：

从div的样式中删除width: 25%; float:left;
将四个彩色div中的每一个包裹在具有style="width: 25%; float:left;"

这种方法的优点是所有四列的宽度相等，它们之间的间隙总是5px * 2.

这是它的样子：

.cellContainer {
  width: 25%;
  float: left;
}

<div style="width:100%; height: 200px; background-color: grey;">
  <div class="cellContainer">
    <div style="margin: 5px; background-color: red;">A</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: orange;">B</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: green;">C</div>
  </div>
  <div class="cellContainer">
    <div style="margin: 5px; background-color: blue;">D</div>
  </div>
</div>

Answer 2

我建议将div缩小一点并添加一个百分比的边距。

<div style="width:100%; height: 200px; background-color: grey;">
  <div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div>
  <div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div>
</div>

http://jsfiddle.net/YJT7q/

Answer 3

有很多方法可以解决这个问题。

使用box-sizing css3属性并使用边框模拟边距。

http://jsfiddle.net/Z7mFr/1/

div.inside {
 width: 25%;
 float:left;
 border-right: 5px solid grey;
 background-color: blue;
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
 -webkit-box-sizing:border-box; /* Safari */
}

<div style="width:100%; height: 200px; background-color: grey;">
 <div class="inside">A</div>
 <div class="inside">B</div>
 <div class="inside">C</div>
 <div class="inside">D</div>
</div>

减少元素宽度的百分比并添加一些边距。

http://jsfiddle.net/mJfz3/

.outer {
 width:100%;
 background:#999;
 overflow:auto;
}

.inside {
 float:left;
 width:24%;
 margin-right:1%;
 background:#333;
}

Answer 4

这是因为width在提供%时未考虑padding / margin。您需要将金额减少到24%或24.5%。一旦完成，你应该是好的，但是如果你希望它总是正常工作，你将需要根据屏幕大小提供不同的选项，因为你有一个硬编码的边距，但相对大小。

Answer 5

您可以为li标签设置左边距百分比，并在父母上设置相同的负左边距：

ul {margin-left:-5%;}
li {width:20%;margin-left:5%;float:left;}

<ul>
  <li>A
  <li>B
  <li>C
  <li>D
</ul>

http://jsfiddle.net/UZHbS/

Answer 6

另一个想法：在div的另一侧补偿你的保证金。

对于具有间距的一侧，您希望实现一个例子：10px，而对于相反的一侧，补偿-10px。这个对我有用。这可能不适用于所有情况，但根据您的布局和其他元素的间距，它可能会很好。

Answer 7

将所有div放在单个表格单元格中，并将表格样式设置为padding: 5px;。

E.g。

<table style="width: 100%; padding: 5px;">
<tbody>
<tr>
<td>
<div style="background-color: red;">A</div>
</td>
<td>
<div style="background-color: orange;">B</div>
</td>
<td>
<div style="background-color: green;">C</div>
</td>
<td>
<div style="background-color: blue;">D</div>
</td>
</tr>
</tbody>
</table>

将div之间的间距放在水平行中？

7 个答案: