使用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就是你所需要的。