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 是你需要的。