1

ブラウザ/ビューポートが 1280px に縮小され、本体の 3 つの div がすべて壊れている場合を除いて、すべてが完全に機能しています。ブラウザが縮小すると、#related div だけが壊れて、他の 2 つの div (#main、#images) が並んで浮かび、#images が画面いっぱいに伸びます。縮めたCSSの#images divに固定幅を追加すれば、すべてうまくスタックするのですが、#images divを固定幅にしたくなくて、画面いっぱいに広げてほしいです。

考え？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, intial-scale=1.0" />
    <style type="text/css">
        body {
            margin:0;
            padding:0;
            }
        header nav {
            float:left;
            }
        header nav ul {
            margin:0;
            padding:0px;
            }
        #menu1 li {
            list-style-type:none;
            float:left;
            margin:0;
            width:200px;
            height:50px;
            background:orange;
            margin-right:1px;
            }
        #bodywrapper {
            clear:both;
            float:left;
            position:relative;
            }
        #images {
            position:relative;
            margin:0 300px 0 600px;
            background:cyan;
            }
        #main {
            position:absolute;
            top:0;
            left:0;
            width:600px;
            background:lime;
            }
        #related {
            position:absolute;
            top:0;
            right:0;
            width:300px;
            background:red;
            }
        #wrapper {
            width:100%;
            height:auto;
            margin:0;
            padding:0;
            }

        @media screen and (max-width: 1280px){
            #bodywrapper {
                clear:both;
                float:left;
                position:relative;
                }
            #images {
                float:left;
                position:relative;
                margin:0;
                background:cyan;
                }
            #main {
                float:left;
                position:relative;
                margin:0;
                width:600px;
                background:lime;
                }
            #related {
                clear:both;
                float:left;
                position:relative;
                margin:0;
                width:100%;
                background:purple;
                }
            #wrapper {
                width:100%;
                height:auto;
                margin:0;
                padding:0;
                }
            }
    </style>
    <script type="text/javascript" src="https://github.com/scottjehl/Respond/blob/master/respond.min.js"></script>
</head>
<body>
<div id="wrapper">
    <header>
        <nav>
            <ul id="menu1">
                <li><a href="">link 1</a></li>
                <li><a href="">link 2</a></li>
                <li><a href="">link 3</a></li>
                <li><a href="">link 4</a></li>
            </ul>
        </nav>
    </header>
    <div id="bodywrapper">
        <div id="main">
            111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111 111
        </div>
        <div id="images">
            222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222 222
        </div>
        <div id="related">
            333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333 333
        </div>
    </div>
</div>
</body>
</html>
4

3 に答える 3

0

メインと画像の両方をパーセンテージ値に設定し、画像を右にフロートさせます。

 #main {
            float:left;
            position:relative;
            margin:0;
            width:40%;
            background:lime;
            }
 #images {
            float:right;
            position:relative;
            width: 60%;
            margin:0;
            background:cyan;
            }

メイン列の幅を固定したい場合は、これを試してください: コンテナのクラスで 2 つの列 (メインと画像) を div で囲み、1280px 未満に次の css を配置します。

.container {
    position: relative;
}

.main {
    width: 600px;
    position: absolute;
    top: 0;
    left: 0;
}

.images {
    margin-left: 600px;
}

http://jsfiddle.net/Pete_D/bBQnM/2/

于 2013-06-03T07:35:15.217 に答える
0

@media ルールを使用して clear:left the 3rd div item on specific window width setting が基本的/最も簡単な解決策です。

于 2013-06-03T13:31:29.957 に答える
0

フロートが効果を混乱させている可能性はありますか? 最大幅ブロックを次のように置き換えた場合 (「3」div がラップされたときに右マージンを削除)、それはあなたが探している効果ですか? #images に幅を与えないことを具体的に述べたので、以下の 60% 幅のソリューションは、あなたが探しているものではないと思います...

   @media screen and (max-width: 1280px){
        #images {
        margin-right:0;
        background:cyan;
        }
        #related {
            position:relative;
            margin:0;
            width: 100%;
            background:purple;
            }
        }
于 2013-06-03T07:47:14.647 に答える