html - 高度自动时CSS边框崩溃

Question

我有这样的 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;
}

但问题是当我将它设置为“自动”时，边框崩溃了

请问我该如何解决？

谢谢你。

Answer 1

您正在浮动元素.ads-w2，这会导致您的元素具有0高度。

一种可能的解决方案是添加overflow: hidden;到.ads-w2.

Answer 2

 .ads-w2 {
    background: #fafafa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
    display:table; /* <----- this */
}

示例http://jsfiddle.net/2fWj2/

Answer 3

你这样做是正确的。但是因为你没有任何文本或其他东西，DIV你会看到它崩溃。即使DIV只是一个容器。我 DIV用 P一些标签填充它。
看到这个：