2

最初に、通常のシナリオで高さを調整する方法を知っていることを述べさせてください. それにもかかわらず、私は今、何かトリッキーなことに直面しており、他の投稿で解決策を見つけられませんでした.

ページの全幅を占める「ヘッダー」と呼ばれる div があります。
その div の中に「wrapper」という div があります。マージンを使用して中央に配置されます。
そのラッパーの内側には、左側に浮かぶロゴと右側に浮かぶメニューがあります。
最初の 2 つの div (ヘッダーとラッパー) は、コンテンツ (ロゴとメニュー) に従って高さを自動調整すると想定されています。これを行うために、フローティング div の後に「より明確な」div を追加しました。メニューのli要素にパディングを入れた場合を除いて、正常に動作しています。その場合、div は調整されません。以下のフィドルの青いliを参照してください。明確にして、誰かが助けてくれることを願っています。ありがとうございました。

フィドル: http://jsfiddle.net/Gynft/

HTML :

  <div id="header">
        <div id="wrapper">
            <div id="logo">
                [ logo ]
            </div>
            <ul id="menu">
                <li><a href="" class="">AGENDA</a></li>
                <li><a href="" class="">MESSAGERIE</a></li>
                <li><a href="" class="">COMMUNAUTEE</a></li>
                <li><a href="" class="">DECONNEXION</a></li>
            </ul>
            <div class="clearer"></div>
        </div>    
    </div>​

CSS :

body {
font-family:arial;
font-size:10px;
}

.clearer {
clear:both;
}

#header{
background:yellow;

}

#wrapper {
background:green;
width:560px;
margin:20px auto;
}

#logo {
background:purple;
float:left;
}

#menu {
background:orange;
float:right;
}

#menu li {
display:inline;
padding:5px 10px;
background:blue;
}
4

4 に答える 4

2

なぜこれが問題を解決しているのかははっきりとは言えませんが、青い lidisplayをinline-blockインラインではなくに変更するとうまくいくようです!

于 2012-11-29T09:46:34.103 に答える
0

これを試して：

#wrapper {
     background: none repeat scroll 0 0 green;
     margin: 20px auto; overflow: hidden;
     width: 560px;
}
于 2012-11-29T09:49:46.137 に答える
0

ねえ、マークは簡単で、次の方法で目的の結果を得ることができます。overflow:hidden;

それはあなたがあなたをクリアしなかったためで、あなたはあなたparent divで使用floatingしてchild divいたので、私はclearedあなたparent divと一緒overflow:hidden;にいて、あなたの要件に従って正常に動作しています.

そして、私はあなたがこのように見えることを願っています........

CSS

#header, #wrapper {
overflow:hidden;
}

#header{
background:yellow;
}

#wrapper {
background:green;
width:560px;
margin:20px auto;
}

デモ

于 2012-11-29T09:46:31.553 に答える