Question

我写了一个HTML页面 CSS 是

body{
    margin: 0 auto;
    min-width: 992px;
    background: #f2f2f2;
   }
.container{
    margin: 30px auto;
    padding:5px;
    width: 992px;
    height: auto;
    border: 1px solid #C6C6C6;
    border-radius: 15px;
    background: #FFF;
    }
.column{
       margin:0px 5px 5px 0px;
       float:left;
       height: 50px;
       width: 486px;
       background: #0094ff;
       }

和正文是

<div class="container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
</div>

当我从div class float:left中删除.column来运行此页面时，.container的高度会自动增加，但是当我在div class .column中设置float值时div class .container的内容不会增加请任何人都可以打电话给我如何解决这个问题？

Answer 1

如果您在float课程中添加.cointanar元素，您将获得所需的结果。

只需添加fololowing属性即可更新CSS：

.containar { /* shouldn't it be "container"? */
    float: left;
}

演示小提琴： http://jsfiddle.net/yd43nymw/1/

Answer 2

将overflow:hidden;添加到.containar

设置为浮动值时，高度未调整？

2 个答案: