1

我想并排显示多个 div 标签。当我显示 4 个 div 时，每个 div 的宽度为 25%。当我为每个 20px 的 div 添加左边距时，布局换行符，因为 4x25% + 4 x 20px = 100% + 80px。那不管用。

box-sizing 属性不考虑边距。

我现在能做的是给每个 div 的宽度为 16%，总共 80%，每个 div 也有一个 margin-left:5%，总共是 20%，所以它是 100%。那应该行得通。

但是没有更好的办法吗？我只想固定我的div之间的差距。

4

3 回答 3

3

我在 Stackoverflow 上找到了一个适用于此的答案：

JSBIN

将四个彩色 div 中的每一个包装在一个具有 style="width: 25%; float:left;" 的 div 中

这种方法的优点是所有四列将具有相同的宽度，并且它们之间的间隙将始终为 5px * 2。

于 2013-07-01T12:47:40.957 回答
0

是的，你可以做到。

这是一个类似的工作解决方案

的HTML：

<div id="abc">
<div></div>
<div></div>
<div></div>
<div></div>
</div>

CSS：

#abc {
height: 125px;
text-align: justify;
border: 10px solid black;
font-size: 0.1px; /* IE 9 & 10 don't like font-size: 0; */
min-width: 600px;
}
#abc div {
width: 150px;
height: 125px;
display: inline-block;
background: red;
}
#abc:after {
content: '';
width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}

希望这可以帮助。

于 2013-07-01T12:46:11.587 回答
0

HTML

<body>
  <div id="wrapper">
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
    <div id="wrapper_2">
        <div id="child">&nbsp;</div>
    </div>
  </div>
</body>

CSS

#wrapper {
  display:table;
  width:100%;
}
#wrapper_2 {
  display:inline-block;
  width:25%; /* Number of element you want (here 100/4) */
}
#child {
  display:block;
  background-color:red;
  width:80%; /* Size of the element (100% => full cell) */
  margin: 0 auto; /* center the element in the table cell*/
}

JSFIDDLE

http://jsfiddle.net/hJPBz/

于 2013-07-01T13:31:00.713 回答