html - 如何安排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;
}

正如你所看到的，一些文本被隐藏了。到达页脚底部时是否可以在右侧继续？例如，从 3 开始，4 将在 1 旁边，5 在 2 旁边，依此类推。知道怎么做吗？也许我应该使用div？

Answer 1

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

Answer 2

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

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

Answer 3

代替

height: 140px;

经过

min-height: 140px;

所以最小高度是 200px 但可以变大

玩得开心 ：）