0

私は現在ウェブサイトを作成していますが、奇妙なことに出くわしました: 950 幅でページの中央に配置されたコンテンツ div があります。その中には、ヘッダー div、メニュー div、およびその他のコンテンツ div があります。メニュー div と他のコンテンツ div を隣り合わせにしたいので、両方の div で float:left を使用することを考えました。ただし、メニュー div でこの float:left を使用すると、右に押し出されてしまい、その理由がわかりません。他の要素がそれを右に押していると思います。

ちなみに、Zen のサブテーマであるカスタム Drupal テーマを使用してページを作成しています。

ページの作成に使用している HTML は次のとおりです (ヘッダーなし)。

<div id="root">
<div class="content">
    <div class="left-menu">
        <ul>
            <li><p>Camera</p></li>
            <li><p>Audio</p></li>
            <li><p>Licht</p></li>
            <li><p>Lenzen</p></li>
            <li><p>Grip</p></li>
            <li><p>Accessoires</p></li>
            <li><p>Recorders</p></li>
            <li><p>Transport</p></li>
            <li><p>Edit suits</p></li>
            <li><p>Crew</p></li>
        </ul>
    </div>

    <div class="products-overview">
    This is some other content that I want to the right of the menu.
    </div>

</div>

そして、左メニューと製品概要に設定したいくつかの CSS プロパティを次に示します。

.left-menu {
margin-top: 10px;
background-color: #BBB;
width: 150px;
float: left;
}

.products-overview {
background-color: #BBB;
float: left;
}

左メニューが右に押されている理由を誰か説明してもらえますか?

4

3 に答える 3

2

うーん、これはあなたが使用している normalize.css スタイルシートの結果だと思います。

.headerこの問題は、実際にはテーブルを含む要素に起因しています。正規化スタイルシートには がmargin-bottom:1.5emテーブルに適用されており、これは要素のマージンに変換され.header(パディング/ボーダーがないため)、次に を.left-menu右に送信します (マージンにより収まるスペースがないため)左に）。

現在の定義に追加する.header tableと、これを簡単に修正できます。

.header table{
    margin-bottom: 0;
}

これがあなたが探していたものであることを願っています！そうでない場合はお知らせください。さらにサポートさせていただきます。幸運を！

于 2013-07-18T20:27:01.837 に答える
0

私はあなたの問題を再現しようとしました。私はそうして、うまくいくはずの解決策を見つけました。products-overview クラスを に設定するだけfloat:noneです。このフィドルを参照してください。http://jsfiddle.net/shaansingh/yj4Uc/

于 2013-07-18T20:23:10.943 に答える
0

Mozilla Firefox では問題ないように見えます。あなたのコードから、コンテンツ div の幅が必要であることがわかります。寸法、特に左右のパディングとボーダーに注意してください。

于 2013-07-18T20:34:58.443 に答える