响应式图像不折叠答案

【问题标题】：Responsive Image not Collapsing响应式图像不折叠
【发布时间】：2013-11-27 13:01:07
【问题描述】：

我的代码会生成这个（代码在帖子末尾）：

当我拖入时，我希望图像调整大小，它们会这样做（最终我将添加一些代码，在一定大小后将它们放在主图像下方），但第二个右手图像会调整大小，而不是停留在其上方的图像下方：

知道如何解决吗？这是我的代码：

CSS

 body 
{
    font-family: Arial, sans-serif;
    font-size: 16px;
    width: 100%;
    height: 100%;
}

img
{
    width: inherit;
    max-width: 100%;
    height: auto;
}

#wrapper
{
    width: 710px;
    max-width: 90%;
    margin: 0 auto;
}

#main-column-left
{
    max-width: 66%;
    float: left;
}

#main-column-right
{
    max-width: 33%;
    float: right;
    border-collapse: collapse;
}

#news-feature
{
    width: 470px;
    max-width: 100%;
    height: 330px;
    float: left;
    display: block;
}

#news-item-four
{
    width: 230px;
    max-width: 100%;
    height: 160px;
    max-height: 100%;
    float: left;
    margin-bottom: 10px;
}

#news-item-five
{
    width: 230px;
    max-width: 100%;
    height: 160px;
    max-height: 100%;
    float: left;
}

.clear
{
    clear: both;
}

HTML

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="CSS/Styles.css" />
</head>
<body>
    <div id="wrapper">
            <div id="main-column-left">
                <div id="news-feature">
                    <img src="Images/NewsFeatureImage.jpg" />
                </div>
            </div>

            <div id="main-column-right">
                <div id="news-item-four">
                    <img src="Images/NewsImageFour.jpg" />
                </div>

                <div id="news-item-five">
                    <img src="Images/NewsImageFive.jpg" />
                </div>
            </div>

            <br class="clear" />
    </div>
</body>
</html>

【问题讨论】：

那是因为你对父级有一个固定的高度.news-item-four : height: 160px;
有时候，你只需要别人看代码！很好，我不能接受你的评论作为答案，因为它是评论，如果你想将它添加为答案，我会接受 - 干杯。
codepen.io/johannesjo/pen/EFfey
有效@3rror404 的答案。我不是特别在乎声誉
好的，伙计——你修好了，我很感激。

标签： html css image responsive-design

【解决方案1】：

移除.news-item-four上的固定高度

#news-item-four
{
    width: 230px;
    max-width: 100%;
    /*height: 160px;*/
    max-height: 100%;
    float: left;
    margin-bottom: 10px;
}

目前，图像正在调整大小，但容器 (.news-item-four) 没有。

DEMO

【讨论】：