4

HTML レンダリングの基本に疑問があります。私は次の HTML/CSS を持っています。

http://jsfiddle.net/cgZ4C/2/

<style type="text/css">
.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
}

.content
{
    float:left;
    width:196px;
    min-height:20px;
    background-color:#BABABA;
    margin:2px;
}
</style>

<div class="outer">
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>
    <div class="content">
    </div>

<div>

内側のコンテンツが大きくなるときに外側の div が大きくならないのはなぜですか? .content div 内にテキストを追加してみました。しかし、まだ .outer div は成長していませんか?

4

6 に答える 6

0

属性 overflow: hidden を .outer スタイルに追加します。

于 2013-08-14T13:38:01.287 に答える
0

コードはテーブルのように見えるので、display:table( source ) を使用すると、要素はテーブル要素のように動作します。

http://jsfiddle.net/eWwtp/

.outer
{
    background-color:#DADADA;
    width:400px;
    border:1px solid silver;
    margin:auto;
    min-height:50px;
    padding:10px;
    display:table 

}

これらの問題を回避する別の解決策：

しかし、overflow hiddenでは、その div の外側の項目が非表示になったり、切り取られたりする場合 (通常はメニューなどで)、より多くの問題が発生する可能性があります。

http://jsfiddle.net/4LqaK/

追加：

<div class="clear"></div>

.clear{clear:both}
于 2013-08-14T13:29:15.057 に答える
0

フロートをクリアするのが正しい方法ですが、場合によっては、これを行う別の方法があります。

外側のdivもフロート!!!

.outer {
  float: left;
}

このように、アウターはフローティングされた子を尊重して展開しますが、アウターの親 div もフローティングする必要があります<body>。

すべてのフロートは仲間のようなものなので、フローティングされていないクリアされていない div よりも、お互いにうまく調和します。

:)

于 2013-08-14T13:32:13.140 に答える