1

HTML

<div class="main">
    Lorem ipsum dolor.
</div>

<div class="footer">
    <p>More lorem.</p>
    <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</div>

CSS

.main {
    text-align: center;
}

.footer {
    background: red;
    clear: both;
}

.footer ul {
    float: right;
}

.footer li {
    display: inline;
}

.footer p {
    float: left;
}​

JSFiddleでも。

メインのウェブサイトの大きなバージョンが機能しないことを単純化しました。フッターの色が変わりません。赤と書いてあるのがわかりますか？

4

2 に答える 2

4

http://jsfiddle.net/uZs92/2/を参照してください

追加

.footer {
    overflow:hidden;
}

コンテナ内にフローティング要素がある場合、次のことができます。

于 2012-09-02T18:38:05.370 に答える
2

フッターは赤くなりますが、そのコンテンツはすべてフローティングであるため、高さを妨げるものは何もありません0。

overflow: hiddenフローティング要素がその高さに影響を与えるように設定します。

于 2012-09-02T18:37:48.917 に答える