CSS "selective"清除 float

标签 css css-float

我有一堆方 block 在向左浮动。它们的高度各不相同;有的矮,有的高。

现在,这些 block 是动态生成的,因此无法预测每个 block 的高度(或有多少个)。不过,需要灵活,所以如果这些 block 不能全部适合一行,那么,我需要第二行。

问题:由于 block 的高度不同,任何溢出到下一行的 block 都会“依偎”在现有的 float 中:image

我需要溢出 block 来形成自己的行:image

我知道这是正确的行为( float 有利于较高的位置而不是左侧的位置),但是对此的最佳解决方案是什么?我可以更改 HTML 结构(显然还有任何 CSS),但无法在 clear: left 中进行硬编码。

Here's a jsFiddle.

最佳答案

在 block 上使用display: inline-block;在您实际需要将文本环绕在元素周围的情况下,请保存 float

结果:http://jsfiddle.net/EQyVy/18/

关于CSS "selective"清除 float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8676402/

相关文章:

html - 无法弄清楚如何使用 float 和固定定位

layout - 如何在杂志/报纸等砌体布局中 float 元素?

css - 表格数据中的 HTML5 中间对齐

html - Bootstrap collapse 跳起来而不是动画

javascript - 从浏览器打印重复线性渐变

javascript - Bootstrap Collapse show.bs.collapse 第二次不工作

html - 使用 bootstrap 的嵌套布局导致错位

html - CSS float 属性问题(+指导)

html - 第二行的 css 框 'skips'

css - div 在另一个内部的垂直对齐 - 问题