Question

我遇到嵌套div及其高度的问题。

我想要完成的是图像的父级高度拉伸以适合图像。发生的事情是父母过度拉伸，身高比图像大。

HTML

<div class="select_box">
    <div class="selected">
        <img src="http://awardwallet.com/images/fbSmallLogo.png" />
    </div>
</div>

CSS

.select_box {
    display:inline-block;
    height:50px;
    border:1px solid blue;
}
.selected {
    border:1px solid gray;
}
img {
    border:1px solid red;
}

所以在这种情况下，.selected应该等于img height，但是它比5px更高; 谢谢你的帮助

Answer 1

默认情况下，img是一个内联元素，因此在段落中的行之下保留一个空格。将display: block;添加到图像中以删除间距。

小提琴：http://jsfiddle.net/83Ke6/3/

Answer 2

.select_box {
    display:inline-block;
    height:auto;
    border:1px solid blue;
    line-height:0px;
}
.selected {
    border:1px solid gray;
    height:auto;
}
img {
    border:1px solid red;
}

设置自动;高度和行高为0px;，你的div将调整到它的内部内容。结果如下：http://jsfiddle.net/wz45k/

附加图像时div高度过度拉伸

2 个答案: