CSS float : how to form the second row based on tallest DIV?

标签 css html css-float

我使用 float 并排放置 DIV,但是当多余的 DIV 形成第二行(行)时就会出现问题。下一行是根据最后一个 DIV(不是最高的 DIV)的高度形成的。这样就形成了一个不完整的行。

请参阅 http://jsfiddle.net/etrader/6qZnk/ 中的示例

在这里,我想将紫色和绿色 DIV 排成一行。但是紫色 DIV 形成了一个不完整的行,因此,绿色 DIV 转到了另一行。我想根据最高 DIV(即蓝色 DIV)的高度形成下一行。

注意:框高度不是预定义的,而是动态设置的。

最佳答案

使用 display:inline-block 而不是使用 float:left

参见 example

关于CSS float : how to form the second row based on tallest DIV?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8366395/

相关文章:

html - 如何仅在将鼠标悬停在按钮上时才更改按钮的颜色?

jquery - 在 jquery 中使用 css calc()

JavaScript/HTML : Load Html into FrameSet with onunload event

html - div 触摸浏览器的左端和右端

javascript - 清洁 'Tabbing' 系统。 (JavaScript?)

javascript - 如何在 Angular JS 中使用 ng-model 进行绑定(bind)

html - 如何使按钮文本可选择?

css - 在 ROR 中定位无序列表

css - 如何使用 CSS 并排 float 3 个 div?

CSS 标签 "object-fit:cover"不会在 Chrome 中裁剪/剪辑视频