1

私はこの問題に苦労してきました..

ラッパー div があり、テキストでいっぱいの 3 つの垂直列 div が含まれています。このラッパー div は、テキスト全体の背景になるように背景色が赤になっています。

<div id="content_wrapper">

    <div id="cside_a">
       // massive texts goes here
    </div>

    ... // two more columns go here.

</div>

そして、これがそれらの CSS コードです。

#content_wrapper
{
background-color:#DB0A00;
background-repeat:no-repeat;
min-height:400px;
}
#cside_a, #cside_b, #cside_c
{
float: left;
width: 33%;
}

そして、このコードは、400px の高さのボックスのみをカバーする背景を提供します。私の期待は、ラッパー div がその中の div のサイズに応じて自動的にサイズ変更されることでした。

どういうわけか、「overflow:hidden」をラッパー CSS コードで配置すると、すべてが正常に機能します。

「overflow:hidden」が機能する理由がわかりません..これは、オーバーフローしたすべてのテキストを非表示にすべきではありません.. ?

誰かが私に理由を説明できますか? とにかくそれを行う正しい方法はありますか？

4

2 に答える 2

3

問題は、列がフローティングしていることが原因です。「 Clearfix」を見てみましょう

于 2010-04-08T08:10:20.980 に答える
1

フロートをクリアする必要があります。3番目の列の後に以下を追加します。

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

そしてこれをあなたのCSSに

.clear {clear:both;float:none;}
于 2010-04-08T08:12:11.667 に答える