如何安排html页脚元素自动中断

Question

我的网站上有以下页脚

使用此html

<div class="footer_wrapper">
    <div class="top">
        <div class="footer_menu_block_float">
            <h1>Footer section</h1>
            <ul>
                <li>One</li>
                <li>Two</li>
                <li>Three</li>
                <li>Three</li>
                <li>Three</li>
                <li>Three</li>
                <li>Three</li>
                <li>Three</li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div class="bottom"></div>
</div>​

footer_menu_block_float的高度是固定的。

.footer_wrapper .top div.footer_menu_block_float {
    height: 140px;
    float: left;
    width: 200px;
    margin: 10px 20px 0px 10px;
}

正如您所看到的，隐藏了一些文字。当页脚底部到达时，是否可以继续在右侧？例如。从三个，四个将旁边一个和五个旁边两个，依此类推。知道怎么做吗？也许我应该使用div？

Answer 1

替换

height: 140px;

通过

min-height: 140px;

因此最小高度为200px但可以变大

玩得开心：）

Answer 2

我的想法是制作两个ul并浮动它们。看到这个小提琴：http://jsfiddle.net/T5822/

Answer 3

我刚发现这个解决方案非常有用

<div class="footer_wrapper">
        <div class="top">
            <div class="footer_menu_block_float">
                <h1>Footer section</h1>
                <div>One</div>
                <div>Two</div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="bottom"></div>
    </div>

使用

.footer_wrapper .top div.footer_menu_block_float div{
    float:left;
}