Html CSS边框在高度自动调整时崩溃

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

.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 {
    background: #fafafa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
}

输出将是这样的

    <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>

.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 {
    background: #fafafa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
}

我需要让广告的高度变成“自动”，就像那样

    <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>

.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 {
    background: #fafafa;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    height: auto;
}

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

我怎样才能解决这个问题

---

谢谢。

您正在

.ads-w2

中浮动元素，这将导致元素的高度为

0

一种可能的解决方案是添加

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

背景：#fafafa；
边界半径：5px；
-moz边界半径：5px；
-webkit边界半径：5px；
高度：自动；
display:table；/*您这样做是正确的。但是因为您在
DIV
中没有任何文本或其他内容，所以您可以通过crash看到它。即使
DIV
只是一个容器。
我在
DIV
中填充了
P
一些标签。

请发布一个JSFIDLE，这样我们就可以有一个你所说的工作示例了……”我有这样的PHP代码[一些html]。不，你没有！你在ads-w2内浮动div…使ads-w2忽略其内部div的高度。