1

私には奇妙な状況があります。ページに 2 つのパネルがあります。サイドメニューとメイン コンテンツ エリア。

そのメイン コンテンツ エリアには、divと があり、その中にdiv他の 2 つのフロートがありdivsます。1つは左に、もう1つは右に。最後にclear両方の div を使用しますが、コンテナーdivはサイド メニューと同じ高さになります。しかし、それらはネストされていないため、なぜ、どのようにこれが起こっているのかわかりません...

ここにデモがあります：

http://jsfiddle.net/9duUt/1/

2 つのフローティング DIV とフロートをクリアする DIV を削除すると、コンテナー div が通常のサイズになることがわかります。

div をフロートすると、なぜこれが起こるのですか?

そのフィドルのソースコード

<div class="sidemenu">
    aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
    aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />aaa<br />
</div>

<div class="main-content">
    <div class="top-bar">
        <div class="pull-left">
            <h1><span class="glyphicon glyphicon-th large"></span> Test</h1>
            <h5>Sub title</h5>
        </div>
        <div class="pull-right">
        CHARTS
        </div>
        <div class="fc"></div>
    </div>
</div>

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    margin-left: 200px;
    position: relative;
}
.top-bar {
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.5);
    padding: 10px 15px;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

h1 {
    font-size: 28px;
}

.fc {
    clear: both;
}

.sidemenu {
    background: none repeat scroll 0 0 #11161A;
    float: left;
    min-width: 200px;
    position: relative;
}
4

3 に答える 3

1

これは、.fcclear クラスがサイドバーもクリアしているためです。サイドバーもたまたま左にフロートされています -.sidebarネストされていないにもかかわらず.main-content(プロパティの動作方法です) -マークアップをclear削除してに適用します (これにより、新しいブロック フォーマット コンテキストが提供されます)。フロートされた子孫の場合) は、おそらく期待した動作を提供します。また、不要なマークアップを取り除きます。.fcoverflow: hidden;.top-bar

.top-bar {
    box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    padding: 10px 15px;
}

http://jsfiddle.net/9duUt/4/

2.1 Specbothからの値の定義:

両方

ボックスの境界線の上端は、ソース ドキュメントの前の要素から生成された右フローティング ボックスと左フローティング ボックスの外側下端よりも下にある必要があります。

于 2013-08-16T20:05:56.580 に答える
0

そう、問題はFCクラス。サイドメニューのフロートをクリアしているように見えて、高さがそれより下になります。それがあなたのメインコンテンツが増える理由です。とにかく、これは将来物事をめちゃくちゃにする可能性があるので、クリアしておくべきだと思います. float: left;を追加するだけです。main-contentに追加し、 margin-leftを削除します。その後に修正しなければならないもう 1 つの問題は、main-contentの幅です。私が推測する静的な値を入力する必要があります。これが私の変更でフォークされたあなたのjsfiddleです：http://jsfiddle.net/krasimir/pxgrt/2/

.main-content {
    background: linear-gradient(to bottom, #FCFCFC 0%, #E2E2E2 18%, #EAEAEA 100%) repeat scroll 0 0 transparent;
    height: 100%;
    width: 300px;
    position: relative;
    float: left;
}
于 2013-08-16T20:13:38.270 に答える