如果超过高度，则为动态浮动列 [英] Dynamic floating columns if height exceeded

问题描述

我有一个关于<ul>-容器中<li>的动态浮动布局的问题:

I've got a questing concerning a dynamic floating layout of <li>'s in a <ul>-Container:

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

The grey container <ul> has a fixed height of 150px and all <li>'s in it should use the maximum height of 150px and THEN arrange in the next column (See Element 7, 8)

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

I'm quite shure the solution is obvious, but I'm stuck in trying several float-combinations with width and height.

有人建议或解决方案吗?

Anyone suggestions or a solution?

推荐答案

您可以使用CSS3列:"

You can use CSS3 columns: "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;
}

演示

http://jsfiddle.net/UTfD9/

支持

这将适用于:

• Safari
• Chrome
• Firefox
• IE10 +
• Opera 11 +

请参阅:我可以使用CSS3多列布局吗?

这篇关于如果超过高度，则为动态浮动列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！