2

私のコードはこれを生成します（投稿の最後のコード）：

ワイドブラウザ表示

ドラッグすると、画像のサイズが変更されます（最終的には、特定のサイズの後にメイン画像の下に配置するコードを追加します）が、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 に答える