css - 将一个 Div 放置在具有响应图像的 Div 正下方

Question

我有一个 div，其中有一个全宽的响应图像。

图像的高度和宽度会随着浏览器调整大小而调整。

我想在这个具有响应图像的 div 正下方放置另一个 div。

我好像不太对。

这是我所拥有的:

    <div style="display: block; width: 100% !important; height: auto; display: block; background:      #ffffff; text-align: center;">

    <div style="display: block; min-height: 374px;">
    <img src="yahoo.png" title="THE RESPONSIVE IMAGE" />
    </div>

    <div style="width: 100%; height: 10px; background: #D9594C; position: relative;"></div>
     </div>

您可以看到我想要放置在响应式图像下方的 div 具有背景。

非常感谢您的帮助!

Answer 1

很难确定，但我认为这里围绕高度和响应能力存在混淆。

首先，你的图片下方有这么大的差距是因为它的父 div 设置了 min-height: 374px。 div 将扩展以适应图像的高度，因此这并不是真正需要的。

但是，您还谈到了调整大小时图像的高度和宽度应该如何调整。为此，您需要确保图像具有 width: 100%，因此它的宽度只会与其父 div 一样宽。

我已经分离了您的 HTML 和 CSS，并在 CSS 中添加了注释以尝试提供帮助。希望它接近您想要的。

http://jsbin.com/orahuPEh/1/edit