1

左から固定幅（260px）のメニューdivが必要です。次に、相対的な幅 (全体の幅 - メニュー div を除く) を持つコンテンツ div は、常にコンテンツ div(margin:auto) の中心にあるコンテナーになります

これは私のcssです

#site-content{
    margin:25px 0 0 260px;
}
.site-content{
    width:740px;
    margin:auto;
}
#site-menu{
    float:left;
    width: 260px;
    padding: 20px 0;
    overflow:hidden;
}

すべて問題ないように見えますが、フロートに問題があります。.site-content 2 div (フローティング) に設定し、clear:both を使用してフロートをクリアすると、大きなギャップがあり、メニューの終了後に他の要素がダウンします。解決策を教えてください。（下手な英語でごめんなさい）

HTML

<div id="site-menu">
        <ul>
            <li class="menu"><a id="menu-glxavor" class="menu" href="/"></a></li>
            <li class="menu"><a id="menu-mermasin" class="menu" href="/arm/about-us"></a></li>
            <li class="menu"><a id="menu-usucich" class="menu" href="/arm/for-teachers"></a>
            <ul id="menu-usucich-sub">
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-schedule">Դասացուցակ</a></li>
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/homeroom-teachers">Դասղեկներ</a></li>
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/exemplary-lessons">Օրինակելի դասեր</a></li>
                <li class="sub-menu"><a class="a-sub-menu usucich" href="/arm/for-teachers/teacher-training">Վերապատրաստում</a></li>
            </ul>
            </li>
            <li class="menu"><a id="menu-ashakert" class="menu" href="/arm/for-pupils"></a></li>
            <li class="menu"><a id="menu-shrjanavartner" class="menu" href="/arm/graduates"></a></li>       
            <li class="menu"><a id="menu-norutyunner" class="menu" href="/arm/news"></a></li>
            <li class="menu"><a id="menu-mankapartez" class="menu" href="/arm/kindergarten"></a></li>
            <li class="menu"><a id="menu-nyuter" class="menu" href="/arm/materials"></a></li>
            <li class="menu"><a id="menu-bajanortagrvel" class="menu" href=""></a></li>
            <div id="subscribe">
                    <input type="text" id="subscribe-name" placeholder="email" name="subscribe-name" />
                    <button class="large awesome blue" id="sub-button" type="submit">բաժանորդագրվել</button>
                    <div id="sub-notification"></div>
                </div>
        </ul>
        </div>
        <div id="site-content">
        <div class="site-content">
            <div class="pages-content-top"></div>
            <div class="pages-content-center">
            <h2>Համագործակցություն 1</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=37'>Ավելին...</a></span></div><div style='clear:both'></div>


                <h2>Համագործակցություն 2</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=38'>Ավելին...</a></span></div><div style='clear:both'></div>


                <h2>Համագործակցություն 3</h2><div><span class='img'><img src=/views/admin/uploads/hands.jpg></img></span><span class='text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum aliquet erat tempus lacinia. Fusce congue enim lacus, adipiscing sollicitudin libero feugiat sed. Phasellus suscipit, lorem ac bibendum pharetra, sem neque commodo nulla, in dignissim dolor leo eu nulla. Maecenas eu faucibus turpis. Maecenas in nulla at nisl varius commodo. In facilisis enim mattis eros bibendum pulvinar. Phasellus congue odio quis diam viverra, eu aliquam dui consequat. Etiam massa arcu, condimentum vel rutrum a, ultrices quis felis.</span><span class='read-more'><a href='/arm/read?category=about-us&id=39'>Ավելին...</a></span></div><div style='clear:both'></div>
            </div>
            <div class="pages-content-fot"></div>
        </div>
        </div>
4

2 に答える 2

0

トロイの木馬は正しい...フロートプロパティを削除し、サイトコンテンツの CSS で width auto を使用したのは、修正されていないと述べたからです..これがあなたが望むものかどうかはわかりませんが、このフィドルをチェックしてください WORKING FIDDLE

CSS

  h2{
margin:0;
}

編集:わかりました。問題はサイト コンテンツ セクションにあると思います。最初の段落の終わりと 2 番目の見出しの間に大きなギャップがあります。少なくともこれは私が理解したことであり、これは、このようなフィドルで実行したときにコードが示すものです。

コードから 1 行削除しました。つまり46行目

  <div style='clear:both'></div>

これで、最初の段落と 2 番目の段落の間にギャップがなくなりました。理想的には、右側にメニューがあるため、「 clear:both 」プロパティを使用する必要があります。したがって、「clear:both」プロパティを使用すると、右側にメニューが表示されるため、自動的に div が下向きに配置されます。あなたが私の主張を理解していることを願っています。この例を確認してください。ここで、2 つのパラグラフ間のギャップが「clear:both」プロパティによるものであることがわかります。それを外すと隙間がなくなります。

あなたの問題に対する最終的な解決策（私は願っています）。

于 2013-07-23T18:00:16.137 に答える
0

内部がその内部のフロートのみに影響を与え、外部のフロートには影響を与えないようにするために、新しいブロック書式設定コンテキスト.site-contentを確立する必要があります。最も適切なオプションはandのようです（幅が固定されており、変更によってレイアウトが変更されないため）。clearoverflow: hiddendisplay: tabledisplay

于 2013-07-23T18:19:14.053 に答える