超过高度时的动态浮动列答案

【问题标题】：Dynamic floating columns if height exceeded超过高度时的动态浮动列
【发布时间】：2013-03-04 15:13:54
【问题描述】：

我有一个关于<li> 在<ul>-Container 中的动态浮动布局的问题：

灰色容器<ul> 的高度固定为150px，其中所有<li> 应使用150px 的最大高度，然后排列在下一列（参见元素7、8）

我很确定解决方案是显而易见的，但我一直在尝试几种具有宽度和高度的浮点组合。

任何建议或解决方案？

【问题讨论】：

【解决方案1】：

您可以使用 CSS3 列：“CSS Multi-column Layout Module”：

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

CSS

ul {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count:3;
    max-height: 20px;
}

ul > li {
    height: 20px;
}

演示

支持

这将适用于：

【讨论】：

我决定结合这个 jQuery-Plugin for IE-Compatiblity 来实现这个解决方案：welcome.totheinter.net/columnizer-jquery-plugin
貌似，这不适用于 ul 上的 max-height，您必须改用 height

【解决方案2】：

http://www.w3schools.com/css3/css3_multiple_columns.asp

CSS 多列布局扩展了块布局模式，允许轻松定义多列文本。如果行太长，人们阅读文本会有困难；如果眼睛从一行的末尾移动到下一行的开头需要太长时间，他们就会忘记自己在哪一行。因此，为了最大限度地利用大屏幕，作者应该将有限宽度的文本列并排放置，就像报纸一样。

不幸的是，如果不强制在固定位置换行，或者严格限制文本中允许的标记，或者使用英雄脚本，这对于 CSS 和 HTML 是不可能的。这个限制通过添加新的 CSS 属性来扩展传统的块布局模式来解决。

【讨论】：

【解决方案3】：

您可以计算您的列可以容纳多少 li 元素，并使用 pseudo 选择器 (nth-child) 将其拆分为列。看我做的demo：http://jsfiddle.net/QqudC/1/

【讨论】：

困难的解决方案 - 这不是真正的跨浏览器编译器:(
css 列也不是一个合规的解决方案。但是pseudo 选择器是一个与 IE9、chrome 和 FF 兼容的解决方案。 CSS columns 兼容性从 IE10+ 开始。如果兼容性是您非常关心的问题，您最好找到 jquery 方法。