2

そのようなHTMLコードがあります

    <div class="ads-w1">
           <div class="ads-w2">
                   <div class="ads_cost"><span>$0.01</span></div>
                   <div class="ads_info">
                           <div class="title">Ads Title</div>
                   </div>
                   <div class="ads_banner">Ads Banner</div>
           </div>
    </div>

そして、そのようなcssコード

.ads-w1 {
    background: url("../img/ads-bg1.png") 0px 0px repeat-x #3ec2c5;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 5px 5px 5px 5px;
    margin: 0px 0px 12px;
}

.ads-w2 {
    background: #fafafa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: 150px;
}

.ads_cost {
    float: left;
    font-size: 24px;
    color: #FFFFFF;
    text-shadow: 1px 1px 1px #525252;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin: 0px 20px 0px 0px;
    width: 120px;
    background-color: #00BF00;
    text-align: center;
    line-height: 54px;
}


.ads_info {
    float: left;
    width: 340px;
    overflow: hidden;
}


.ads_banner {
    float: left;
    text-align: center;
    width: 490px;
    overflow: hidden;
    margin: 8px;
}

.ads_info .title {
    font-size: 18px;
    color: #278dff;
    font-weight: bold;
    padding: 0px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    height: 20px;
    overflow: hidden;
}

出力はそのようになります

ここに画像の説明を入力

.ads_w2 の高さを「自動」にする必要があります。

 .ads-w2 {
    background: #fafafa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
}

しかし問題は、「自動」に設定すると境界線がクラッシュしたことです

ここに画像の説明を入力

どうすれば解決できますか？

ありがとうございました。

4

3 に答える 3

4

要素を浮かせているため、要素に高さ.ads-w2が生じます。0

考えられる解決策の 1 つは、 に追加するoverflow: hidden;こと.ads-w2です。

于 2013-02-18T12:58:24.147 に答える
0

あなたはそれを正しく行います.しかし、テキストやその他のものがないためDIV、クラッシュして表示されます. DIVコンテナのみですが。DIVこれを Pいくつかのタグで埋め ます。
これを参照してください：

于 2013-02-18T13:16:57.980 に答える