html - 元素打破了多列布局中的流程

我遇到了一个问题，该问题似乎是特定于具有视网膜显示屏的设备上的Chrome的。具体来说，我正在使用：


MacBook Pro（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/（调整结果窗口的大小，以便获得三列布局）

最佳答案

干得好。

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; }

关于html - 元素打破了多列布局中的流程，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28566808/