2

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

宽浏览器显示

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

更薄的浏览器窗口

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

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>
4

1 回答 1

4

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

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

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

演示

于 2013-11-14T13:37:09.423 回答