Question

我有一堆div，一个接一个，每个都有一个图像。当我将min-height设置为高于图像高度的值时，一切正常：

enter image description here

但是，如果我将图像设置为50px而图像为100 + px，则图像类似于＆＃34;级联＆＃34;

enter image description here

如何强制div至少与其中的图像一样高？

CSS

body {
    background: #cccccc;
    margin: 0px;
}
a {
    text-decoration: none;
    color: #333333;
}
a:hover {
    text-decoration: underline;
}
.reply {
    min-height: 50px;
    padding: 10px;
    background-color: #eeeeee;
    font-size: 14px;
    margin: 10px;
}
.post {
    padding-top: 10px;
    /*background-color: #ff0000;*/
}
.postimage {
    float: left;
    padding-right: 10px;
}
.postcomment {

}

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="main.css" />
    </head>
    <body>
        <div class="reply">
            One
            <div class="post">
                <img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
            </div>
        </div>
        <div class="reply">
            Two
            <div class="post">
                <img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
            </div>
        </div>
        <div class="reply">
            Three
            <div class="post">
                <img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
            </div>
        </div>
        <div class="reply">
            Four
            <div class="post">
                <img class="postimage" src="http://i1.minus.com/jfdkd7lABbSp8.png" />
            </div>
        </div>
    </body>
</html>

Answer 1

将clear: left添加到您的div。

看到了吗？

.postimage {
    float: left;
    padding-right: 10px;
}

浮动div的内容时，div不会垂直拉伸以容纳。

所以，加上这个：

.reply {
    min-height: 50px;
    padding: 10px;
    background-color: #eeeeee;
    font-size: 14px;
    margin: 10px;
    clear: left;
}

将解决问题。

替代解决方案 我倾向于使用的另一个解决方案是使用overflow hack，而不是清除：

.reply {
    min-height: 50px;
    padding: 10px;
    background-color: #eeeeee;
    font-size: 14px;
    margin: 10px;
    width: 100%;
    overflow: hidden;
}

你会希望这会隐藏div下面的图像部分，但它有不同的结果：overflow: hidden不会隐藏内容，而是使div伸展以包含整个图像。

注意：要使此方法适用于较旧的浏览器，必须指定宽度（请注意我在上面的css中添加了该宽度）。

强制div来容纳图像（最小高度不起作用）？

1 个答案: