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

，输出就像那样

enter image description here

我需要让.ads_w2高度为“自动”，这就像那样

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

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

enter image description here

我怎么能解决这个问题？

谢谢。

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。{ see this:

当高度自动时，CSS边框崩溃

3 个答案: