html - 如何让不同高度的html div float 起来

标签 html css

我在容器 div 中有一系列动态创建的不同高度的 div。

<div id="container">
  <div id='d1'>Varying text...</div>
  <div id='d2'>Varying text...</div>
  <div id='d3'>Varying text...</div>
  <div id='d4'>Varying text...</div>
  <div id='d5'>Varying text...</div>
  <div id='d6'>Varying text...</div>
  <div id='d7'>Varying text...</div>
</div>

flow.jpg

当我“ float :左”时,div 按预期换行,在较短的 div 和下一行 div 之间留下空白。

flow2.jpg

我如何让 div 有效地“ float :向上”,垂直环绕而不是水平环绕。仅使用 css。

理想情况下,第 2 项应在第 1 项下,但任何改进都会有所帮助。

所以它最终看起来像这样

enter image description here

最佳答案

尝试使用 jQuery Masonry。这可能是一个很好的解决办法。

http://masonry.desandro.com/

或者试试 Isotope,它有更好的性能

http://isotope.metafizzy.co/

关于html - 如何让不同高度的html div float 起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7465560/

相关文章:

html - 设置html元素和body元素的宽度有什么作用?

css - Bootstrap 中可用的文本颜色类

html - 同一类的嵌套 div,在悬停时显示子项

html - 提交按钮不会正确排列

javascript - 跨浏览器编程的最佳工具是什么?

javascript - 更改 HTML Canvas 的分辨率

JavaScript: Canvas 高度与我设置的值不同

javascript - 避免包含特定类元素的最后一个元素的样式

html - Bootstrap 分页中的禁用链接

html - 无法重叠 DIV