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

交換

height: 140px;

に

min-height: 140px;

したがって、最小の高さは200ピクセルですが、大きくなる可能性があります

楽しむ ：）

Answer 2

私の考えは、2つulのsを作成し、それらをフロートさせることです。このフィドルを参照してください：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;
}