html - 元素在多列布局中中断流

Question

我遇到了一个问题，这个问题似乎是在配备 Retina 显示屏的设备上的 Chrome 浏览器特有的。具体来说，我正在使用:

• MacBook Pro(视网膜显示屏，13 英寸，2012 年末)
• 操作系统 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; }