0

助けてください！いくつかの div セクションを作成しようとしていますが、これらの div セクションのいくつかには、フローティングされている他の div があります。そのすべてをクリアしました。しかし、セクションは、その中のコンテンツに対応するために成長していません。以下は私のHTMLです -

<div class="data">
    <div class="name">Data</div>
    <div class="first section">
        <div class="title">First Section</div>
        <div class="left settings">
            <div class="row">
                 <div class="field">First Name</div>
                 <div class="value">John</div>
            </div>
            <div class="row">
                  <div class="field">Last Name</div>
                  <div class="value">Smith</div>
            </div>
        </div>
        <div class="right settings">
            <div class="row">
                 <div class="field">ID</div>
                 <div class="value">321</div>
            </div>
            <div class="row">
                  <div class="field">Group</div>
                  <div class="value">Eng</div>
            </div>
        </div>
    </div>
    <div class="second section">
        <div class="title">Second Section</div>
    </div>
    <div class="third section">
        <div class="title">Third Section</div>
    </div>
</div>

以下は私のCSSです -

div.data {
    position: relative;
    top: 1em;
    width: 100em;
}

div.data div.name {
    color: #0066FF;
    font-weight: bold;
}

div.data div.section div.title {
    color: green;
    font-weight: bold;
}

/** first section **/
div.data div.first div.settings {
    position: relative;
    width: 799px;
    border-top: 1px solid;
    float: left;
}

div.data div.first div.left {
    border-left: 1px solid;
}

div.data div.first div.settings div.row {
    border-bottom: 1px solid;
    clear: both;
    height: 2em;
}

div.data div.first div.settings div.row div {
    float: left;
    height: 22px;
    padding: 5px;
    border-right: 1px solid;
}

div.data div.first div.settings div.row div.field {
    width: 192px;
}

div.data div.first div.settings div.row div.value {
    width: 585px;
}

/** second section **/
div.data div.second {
    clear: both;
}

最初のセクションには、タイトルと、左と右で構成される表があります。これらは両方とも左にフロートされ、クリアされます。左右のテーブルの行にはフィールドと値があり、これらも左右にフロートされ、クリアされます。この時点で、「最初のセクション」は、その中のコンテンツが大きくなるにつれて大きくなると予想しています。しかし、代わりに、高さはセクション タイトルと同じ高さの 22px に固定されています。

何が起こっている？div.section の overflow:auto を試してみましたが、うまくいきました。しかし、「最初のセクション」で div.settings にこのスタイルを設定しようとしたとき:

div.data div.first div.settings {
     position: relative;
     top: 1em;
}

新しい変更に合わせて高さが大きくなる代わりに、これらのスクロールバーが表示されます。そして、すべてがうまくいきませんでした。私は本当にこれを理解しようとして頭がいっぱいです。私が間違っていることについて誰かが私に何か提案をしてくれれば、それは大きな助けになるでしょう。

ありがとう。

4

1 に答える 1

1

フローティング コンテンツの高さに合わせて要素を大きくしたい場合は、それ自体をフローティングするか、フローティング コンテンツの後にクリアを適用する必要があります。

これに対する一般的な解決策はclearfixです

        .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

    /*
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */

    .clearfix {
        *zoom: 1;
    }

特定のケースで達成しようとしているレイアウトについてはよくわかりませんが、左右のセクションに clearfix クラスを適用することを検討できると思います。

https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

問題を再現しようとしました - http://codepen.io/anon/pen/cIoGt

さらにサポートが必要な場合は、問題をより明確に示すためにそれを取得してみてください

于 2012-09-27T21:36:10.773 に答える