1

私はこのようなウェブページ構造を持っています:

<div class="total">
    <div class="menu">
    </div>
    <div class="content">
    </div>
</div>

したがって、「メニュー」div には左側のメニューが含まれ、「コンテンツ」div には動的テキストが含まれます。実際、私が作成した構造は、両方とも正しい方法で、「合計」div 内に配置されています。私は実際にCSSの「合計」divを次のように編集しました:

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
}

問題は、実際に必要なものを取得できないことです。境界線がすべて上にあり (水平行のようです)、背景色が異なる div が表示されません。

「合計」divの高さを動的にするにはどうすればよいですか?

編集: jsFiddleへのリンク

4

2 に答える 2

6

すべての.total子がフロートされているため、要素は完全に折りたたまれています。必要なのは、clearfix を追加することだけです。

http://jsfiddle.net/CJZCt/3/

.total{
position:relative;
top:50px;
margin: 0 auto;
background-color:#eeeeee;
height:auto;
border:2px solid #000;
border-color:rgb(82,115,154);
    overflow: hidden;
}

フロートをクリアする他の方法は、 https ://stackoverflow.com/a/1633170/1652962 にあります。

于 2012-12-28T13:56:21.757 に答える
0

これは clearfix で修正できます: http://nicolasgallagher.com/micro-clearfix-hack/

これをcssに追加し、cfクラスをdiv.contentに追加します

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

テスト: http://jsfiddle.net/CJZCt/4/

于 2012-12-28T14:00:22.053 に答える