Question

好吧，我已经创建了一个jsfiddle代码段，如下所示

这是代码

HTML

<div id="container">
    <div class="media">
        <img src="http://i.minus.com/i3qPeX4FjQRFt.jpg"/>
    </div>
</div>

CSS

#container {
    position:relative;
    width:400px;
    height:320px;
    background-color:#efefef;
}

.media {
    wight:100%;
    padding:2px;
    background-color:#a0a0a0;
    position:absolute;
    bottom:0;
}

.media > img {
    width:100%;
    height:auto;
}

这样做的目的是在#container的底部显示一个图像。但正如你所看到的，媒体类底部有一个额外的“4px”，我不知道为什么。它完全破坏了视野..请帮忙。

Answer 1

将vertical-align:bottom添加到图片的CSS中：

.media > img {
    width:100%;
    height:auto;
    vertical-align:bottom;
}

<强> jsFiddle example

html / css的奇怪行为

1 个答案: