多列布局中的元素中断流

Question

我在配备 Retina 显示屏的设备上遇到了似乎特定于 Chrome 的问题。具体来说，我正在使用：

• MacBook Pro（Retina，13 英寸，2012 年末）
• OS X (10.10.2)
• Chrome (40.0.2214.111)（64 位）

---

我在<ul> 元素上创建了一个CSS 多列布局，其中<li> 之一包含<div>，它具有max-height: 50px 和overflow: auto。

<div> 并没有按照您的预期行事，而是似乎忽略了列并将其自身放置在根本没有列时会出现的位置，例如 http://i.imgur.com/0OgsEug.png。

示例：http://jsfiddle.net/pabwszej/2/（调整结果窗口的大小，以便获得 3 列布局）

Answer 1

给你。

jsfiddle.net/pabwszej/3

ul, li {list-style-type: none; margin: 0; padding: 0; }

div { max-height: 50px; overflow: scroll; border: 1px solid green; }

.columns {  }

.columns > li { margin-bottom: 5px; border: 1px solid red; -webkit-column-width: 150px; width:150px; float:left; margin-left:5px; }