Question

我有以下代码

HTML

<div class="content">
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
    <div class="col">

    </div>
</div>

CSS

.content{
    border: 1px solid black;
    width:940px;
    margin:auto;
    padding:10px;
    padding-top: 10px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    min-height: 1000px;
    background-color: #FFFFFF;
    margin-bottom:0;
}


.col{
    float:left;
    border: 1px solid red;
    background-color:blue;
    height: 2000px;
    width:18%;
}

以下是fiddle.

我希望内容随着.col的高度增长，但如果col低于1000px的内容则保持在1000px。这不是min-height属性的作用吗？我想用不同的柱子中随机高度的图像填充col，所以我不确定它的.col div的总高度。

Answer 1

当你浮动.col时，它并没有扩大父母的身高。您需要清除.col元素后的浮点数。您可以使用:after伪元素执行此操作，而无需添加其他标记：

<强> DEMO

CSS：

.content:after{
    content:'';
    display:block;
    clear:both;
}

Answer 2

HTML

<div class="content">
    <div class="col">

    </div>
    <div class="clear"></div>
</div>

CSS

.content{
    border: 1px solid black;
    width:940px;
    margin:auto;
    padding:10px;
    padding-top: 10px;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         7px 7px 5px 0px rgba(50, 50, 50, 0.75);
    min-height: 1000px;
    background-color: #FFFFFF;
    margin-bottom:0;
    height:auto;
    display:block;
}
.clear{
    clear:both;
}

.col{
    float:left;
    border: 1px solid red;
    background-color:blue;
    height: 2000px;
    width:18%;
}

我是否理解这是你的目标

Answer 3

清除花车 -

.clr{clear:both}

<强> Demo

Answer 4

在.col

下面添加clearfix

<div class="content">
    <div class="col">

    </div>
    <div class="clearfix"></div>
</div>

然后删除.content中的min-height: 1000px;

CSS for clearfix

clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

随着内部div的增长，最小高度和div增长

4 个答案: