0

私のウェブサイトに次のフッターがあります

ここに画像の説明を入力してください

この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を使うべきですか?

4

3 に答える 3

0

交換

height: 140px;

min-height: 140px;

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

楽しむ :)

于 2012-04-08T13:31:07.897 に答える
0

私の考えは、2つulのsを作成し、それらをフロートさせることです。このフィドルを参照してください:http://jsfiddle.net/T5822/

于 2012-04-08T13:41:11.670 に答える
0

このソリューションは非常に便利だと思いました

<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;
}
于 2012-04-08T14:45:23.123 に答える