7

我在水平行中有 4 个 div。我想在 div 之间放置空间（我猜是使用边距？），但是当我这样做时，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>

我猜这是因为宽度属性，当一个百分比时，没有将边距考虑到元素的总宽度？这样做的正确方法是什么？

谢谢

4

7 回答 7

13

一个可能的想法是：

  1. width: 25%; float:left;从 div 的样式中删除
  2. 将四个彩色 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>

于 2012-11-21T16:35:17.397 回答
7

我建议让divsa 更小一些，并增加一个百分比的边距。

<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/

于 2012-11-21T16:26:48.913 回答
2

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

使用 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;
}
于 2012-11-21T16:47:42.503 回答
1

这是因为width当提供 a 时%不考虑padding/ margins。您需要将金额减少到可能24%或24.5%。完成此操作后，您应该会很好，但是如果您希望它始终正确工作，则需要根据屏幕尺寸提供不同的选项，因为您有硬编码的边距，但相对尺寸。

于 2012-11-21T16:27:33.640 回答
1

您可以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/

于 2012-11-21T16:28:20.727 回答
0

另一个想法：在 div 的另一侧补偿您的边距。

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

于 2015-06-18T22:51:48.113 回答
0

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

例如

<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>

于 2015-07-15T14:14:45.667 回答