html - 使用 HTML 和 CSS，如何使图像与水平线垂直对齐？

Question

我希望左侧的图像与右侧的水平线相邻(底部齐平)。它应该是响应式的，以便线条可以根据需要改变宽度。现在，图像位于线的顶部，而不是旁边。

编辑:这将提供更多说明。橙色部分是图像。细灰色线是线。 http://screencast.com/t/beMBRhpBpZ

这是HTML

<div>
    <img src="image.png">
    <hr>
</div>

这是CSS

img {
    float:left
}
hr {
    width:100%
}

如何做到这一点？可以根据需要更改 HTML/CSS。但应该是跨浏览器兼容和响应的。

Answer 1

div {
border-bottom: 3px solid #000;
}

img {
    position: relative;
    bottom: -3px;
}

你真的不需要hr。 border-bottom 是你所需要的。