Question

在堆叠不同高度的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>

Answer 1

浮点数不能填充元素之间的垂直间隙，也不需要JS或jQuery解决方案，而您可以使用 CSS列：

＆＃13;

*{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;

此解决方案完全响应，调整浏览器窗口大小以查看其运行情况。

Answer 2

是的，可以使用css flex 。结帐guide

HTML堆栈浮动div垂直

2 个答案: