在堆叠不同高度的DIV时,它会在打破下一行时产生大量空白空间。附图中的第1组和第5组。我试过inline-block,float:left,display:flex; flex-wrap:wrap;很少有其他属性似乎无法解决这个问题。我看到其他帖子推荐基于JQuery的解决方案。是否有可能仅使用HTML和CSS [pinterest样式布局]来实现这一点?
<html>
<head>
<style>
body { background: none repeat scroll 0 0 #EFEFEF; font-size:12px;font-family: "Courier New", "Courier", "monospace"; }
fieldset{border-color: grey;border-style: solid;}
div.groups{ width:300px;float:left;padding:5px 3px 5px 8px;}
div.container{ width:100%;}
</style>
</head>
<body><br>
<div class = "container">
<div class = "groups"><fieldset> <legend><b>Group 1</b></legend>
<ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset> <legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset> <legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset> <legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset> <legend><b>Group 5</b></legend><ol><li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset> <legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset> <legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
</div>
</body>
</html>
答案 0 :(得分:1)
浮点数不能填充元素之间的垂直间隙,也不需要JS或jQuery解决方案,而您可以使用 CSS列:
*{margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
body {font-size:12px; font-family: "Courier New", "Courier", "monospace";}
fieldset {border-color: grey; border-style: solid;}
ol {list-style-position: inside;}
.container {
column-count: 3; /* three columns per row */
column-gap: 0; /* for horizontal gaps between groups */
}
.container > .groups {
page-break-inside: avoid;
break-inside: avoid-column;
padding: 5px 8px;
}
@media screen and (max-width: 768px) {
.container {
column-count: 2; /* two columns per row */
}
}
@media screen and (max-width: 480px) {
.container {
column-count: 1; /* one column per row */
}
}
&#13;
<div class="container">
<div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ol></fieldset></div>
<div class="groups"><fieldset><legend><b>Group 2</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class="groups"><fieldset><legend><b>Group 3</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class="groups"><fieldset><legend><b>Group 4</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset><legend><b>Group 5</b></legend><ol><li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset><legend><b>Group 6</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
<div class = "groups"><fieldset><legend><b>Group 7</b></legend><ol><li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>
</ol></fieldset></div>
</div>
&#13;
此解决方案完全响应,调整浏览器窗口大小以查看其运行情况。
答案 1 :(得分:-1)
是的,可以使用css flex 。 结帐guide