1

3つのボックス（緑：300ピクセル、青：200ピクセル、黄色：100ピクセル）を含むラッパーがあります。コンテナの幅は500pxまたは300pxのいずれかです。

私が欲しいのは、ラッパーの幅が500pxの場合、緑と青のボックスが整列し、黄色が非表示になることです（ケースA）。他のケース（B）では、ラッパーの幅が300pxの場合、上部に緑色のボックスを配置し、下部に他の2つのボックスを揃えます。

これを行う方法はありますか？

すべての高さが等しい（例：100px）

更新：ラッパーの幅を事前に制御することはできません。したがって、2つのソリューション（それぞれ1つのケース）ではなく、両方のケースで機能するソリューションが必要です。

4

3 に答える 3

2 
<!doctype html>
<html>
    <head>
        <title>Demo</title>
        <style>
            #caseA {width: 500px; float: left;}
            #caseB {width: 300px; float: left; clear: both; margin-top: 100px;}
            #caseA > div, #caseB > div {height:100px; position: relative;}

            .boxGreen {background-color:green; width: 300px; float: left; z-index: 3;}
            .boxBlue {background-color:blue; width: 200px; float: right; z-index: 2;}
            .boxYellow {background-color:yellow; width: 100px; float: right; margin-left:-100px; z-index: 1;}
        </style>
    </head>
    <body>
        <div id="caseA">
            <div class="boxGreen"></div>
            <div class="boxBlue"></div>
            <div class="boxYellow"></div>
        </div>

        <div id="caseB">
            <div class="boxGreen"></div>
            <div class="boxBlue"></div>
            <div class="boxYellow"></div>
        </div>
    </body>
</html>
于 2012-06-28T20:29:59.267 に答える
1

これはどう：

<style>
    #wrapper{
        overflow:hidden;
    }
    .wide{
        width:500px;
        height:100px;
    }
    .narrow{
        width:300px;
        height:200px;
    }
    #green{
        width:300px;
        height:100px;
        background-color:Green;
        float:left;
    }
    #blue{
        width:200px;
        height:100px;
        background-color:Blue;
        float:right;
    }
    #yellow{
        width:100px;
        height:100px;
        background-color:Yellow;
        float:left;
    }
</style>


<div id="wrapper" class="wide">
    <div id="green">&nbsp;</div>
    <div id="blue">&nbsp;</div>
    <div id="yellow">&nbsp;</div>
</div>

次に、スタイルを切り替える必要があるときに、2つのクラスを前後に入れ替えることができます。

于 2012-06-28T20:19:03.983 に答える
1

私はあなたがこのようなものが欲しいと思いますか？

更新：@mediaクエリを使用するようになりました。

PS。結果を確認するには、フィドルhtmlpainelのサイズを変更します。

于 2012-06-28T20:29:33.557 に答える