我想并排显示多个div标签。当我显示4个div时,每个div的宽度为25%。当我为每个20px的div添加左边距时,布局换行符因为4x25%+ 4 x 20px = 100%+ 80px。那不行。
box-sizing属性不考虑边距。
我现在可以做的是给每个div一个16%的宽度,总共80%,每个div也有一个左边距:5%,总共20%,所以100%全部在一起。这应该有用。
但是没有更好的方法吗?我只想在我的div之间找到固定的差距。
答案 0 :(得分:3)
我在Stackoverflow上找到了一个适用于此的答案:
将四个彩色div中的每一个包裹在一个div中,该div具有style =“width:25%; float:left;”
这种方法的优点是所有四列的宽度相等,它们之间的间隙总是5px * 2.
答案 1 :(得分:0)
是的,你可以做到。
以下是类似的 WORKING SOLUTION
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;
}
希望这有助于。
答案 2 :(得分:0)
HTML
<body>
<div id="wrapper">
<div id="wrapper_2">
<div id="child"> </div>
</div>
<div id="wrapper_2">
<div id="child"> </div>
</div>
<div id="wrapper_2">
<div id="child"> </div>
</div>
<div id="wrapper_2">
<div id="child"> </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