css - 具有可变高度的 float div(排列)

标签 css html css-float

关于高度可变的 float div 的排列,我遇到了一个简单的问题。

目标:

goal

结果:

result

我只有带有 css float: left; 的 div 容器并且没有定义高度。第一个红色圆圈表明我的技术失败了,尽管第二个红色圆圈通过显示它有效证明了我的错误。不幸的是,最后一个(不是在屏幕截图上)只是在前一个高度之后开始 float (所以左边有一个完整的空白空间)。

我该如何解决?

谢谢!

最佳答案

我不认为这可以通过“仅”css 100% 实现,但 jquery-masonry 应该可以做到这一点 [ http://desandro.com/resources/jquery-masonry/ ].好吧,但我希望有人证明我错了:)

关于css - 具有可变高度的 float div(排列),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3830817/

相关文章:

javascript - 在Wordpress网站上点击图片播放随机声音?

html - CSS float :left causes thumbnails to align diagonal to each other. ..>.<

html - 为什么 box-sizing 是 :content-box being ignored on OS X WebKit browsers?

html - Div 显示为表格 inside div 显示为表格

javascript - 将 Canvas 元素放在前面?

html - 如何使 <pre><code> 元素水平滚动并确保内容在边框框内?

jquery - 匹配不同尺寸的浏览器时,如何用父元素的specific固定一个元素的位置

javascript - 跟随时使 Canvas 图像指向鼠标

javascript - 如何防止调整大小的动画 (javascript) 弄乱我的 (css) "float"布局?

css - 水平列表不内联/一行