0

私のフィドル：

http://jsfiddle.net/yJdbF/17/

HTML:

<div class="container">
    <div class="content">
        <div class="span70">
            DDDDD
        </div>
        <div class="span30">
            FFFFFFFFFF
        </div>
    </div>
</div>

CSS:

.container {
  margin-top : 65px;
}

.content {
  border : 10px solid green;
}

.span30 {
  width: 40%;
  background-color : red;
  float : left;
}
.span70 {
  width: 60%;
  background-color : blue;
  float : left;

}

div.span70 と div.span30 は、div.content 内に完全には含まれていません。span* div はフローティング div です (注意が必要です)。

どうすればそれらを内部に完全に含めることができますか??

4

3 に答える 3

2

入れたら

オーバーフロー：非表示;

.contentクラスで、それが機能します。

于 2013-02-16T11:59:43.650 に答える
1

フロートをクリアする必要があります。たとえば、Nicolas Gallagherマイクロ クリア フィックスまたは単純にoverlow: hidden

.content {
    border : 10px solid green;
    overflow: hidden;
}

デモ

于 2013-02-16T11:59:09.250 に答える
0

クリアフィックスを追加する必要があります。更新されたフィドルを参照してください。

Css

.clear {
  clear:both;
}

HTML

<div class="container">
    <div class="content">
        <div class="span70">
            DDDDD
        </div>
        <div class="span30">
            FFFFFFFFFF
        </div>
    </div>
    <div class="clear"></div>
</div>
于 2013-02-16T11:59:11.527 に答える