让div有20%的宽带填在每一个之间,但不是左边的第一或权的最后一个
-
02-01-2020 - |
题
让我们说,我已经有了这种布局,以建立:
假设的文本和格在同一div,并为此共享一个宽约990px,我怎么可以动态使这个网格有平等的宽列,没有固定的宽?
我可以每 div
要 width:20%
, 但然后他们就会行了直接的下一个彼此而不是隔开。 http://jsfiddle.net/97H3P/
我可以每 div
要 width: 20%
, box-sizing: border-box
, , padding: 0 20px
, 但然后会有一个20像素之间的间隙的边缘线和边缘第一个和最后一个 div
. http://jsfiddle.net/97H3P/1/
我可以设立各个 div
要 box-sizing: border-box;
, width: 20%
和 padding-right: 20px
, ,然后在第5div,设置 padding-right: 0;
, 但然后第五div宽于其余的。 http://jsfiddle.net/97H3P/2/
我可以第一个四 div
s每个行为 box-sizing: border-box;
, width:20.8%
, 第五, width: 16.8%
, ,然后 padding-right: 20px
他们所有人,但这一数学只能作出的990px宽度。 http://jsfiddle.net/97H3P/3/
有没有更好的方式做到这一点?我找不到任何优雅的解决方案。
谢谢。
更新:几分钟,我很感兴趣CSS3的 column-count
功能,但后来我意识到,它只不会上到下,不左到右,这是多么需要这一命令。
解决方案
其他提示
关于如何使用一些额外的div为隔板? 小提琴
HTML
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
CSS
div {
background: #000;
height: 200px;
float: left;
opacity: 0.2;
width: 18%;
}
div.spacer{
opacity: 1;
width: 2.5%;
}