1

機能的に完全に機能するように見えるスクリプトがいくつかあります。

HTML：

<div class="navigation1">icon Home</div>
<div class="dropdown">
    <div class="items">icon Default 1</div>
    <div class="items">icon Reports 1</div>
    <div class="items">icon Other 1</div>
</div>

CSS：

.menu {
    margin:auto;
    /*overflow:hidden;*/
    position: relative;
    background:#CCCCCC;
}

視覚的には、しかし、それはすべてうまくいきません。このjsFiddleからわかるように、メニューとフッターのレイアウトが正しくないようです。コメントを外す/*overflow:hidden;*/と、見た目は完璧に見えますが、.dropdown後ろに隠れているよう.footerです。

これを視覚的に正しく表示し、正しく機能させるにはどうすればよいですか？

4

3 に答える 3

3

次に、いくつかのcssプロパティを定義します.menu:after

このように

.menu:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

ライブデモ

---------

またはここで2番目のオプション

HTML

<br />
<div class="header">header</div>
<div class="menu">
    <div class="navigation1">icon Home</div>
    <div class="dropdown">
        <div class="items">icon Default 1</div>
        <div class="items">icon Reports 1</div>
        <div class="items">icon Other 1</div>
    </div>
    <div class="navigation2">icon Home</div>
    <div class="dropdown drop2">
        <div class="items">icon Default 2</div>
        <div class="items">icon Reports 2</div>
        <div class="items">icon Other 2</div>
    </div>
    <div class="clr"></div>  // add this line here 

</div>
<div class="footer">footer</div>

Css

.clr{
clear:both;
}

ライブデモ

于 2012-11-26T10:58:26.193 に答える
2

clear:bothフッタークラスに追加：

.footer
{
    background:#AAAAAA;
    clear:both;
}

float：leftまたはfloat：rightによって前のタグに追加されたフォーマットをクリアします。

于 2012-11-26T10:53:50.000 に答える
0

マークアップに関しては、特にこれをさらに発展させると、フッターがナビゲーションにすぐに従わない場合があります。したがって、代わりにナビゲーションにクリアフィックスを配置します。フロートをクリアするという汚い作業を行うために、最終ビルドに存在する場合と存在しない場合があるフッター（またはその他の要素）に依存しないでください。

編集：ロヒト・アザドと私は同じ時期に同じ答えを思いついたようです。彼のアドバイスに従ってください。

于 2012-11-26T10:58:51.043 に答える