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

我有以下代码

html

这是你的电话号码

我希望内容随.col的高度增长，但如果col低于1000px，则内容将保持在1000px。这不是最小高度属性的功能吗？我想用在不同collmn中具有随机高度的图像填充col，因此我不确定其.col div.

的总高度，因为您浮动了.col，它不会扩展父级高度。您需要清除.col元素后面的浮动。您可以使用：after伪元素执行此操作，而无需添加其他标记：

CSS:

html

我明白了吗？这就是你要找的吗-

.clr{clear:both}

---

在.col的下面添加clearfix

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

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

---

那么，您当前的代码不起作用了吗？你在清理浮动吗？我需要不止一个。我的错误。更新了我的提琴更新了我的提琴，我需要比一个多的列才能成为一个挨着另一个。@Apostolos这仍然是同一个问题，解决方法是清除浮动：如果我将列包装在div.grid中，如何使这个div居中？我尝试了.grid{width:100%margin:auto；}但没有work@Apostolos这是另一个问题。你应该问另外一个问题。

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

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

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

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

.clr{clear:both}

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

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

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