0

私はこのような簡単なセットアップをしています：

<div id="div0">
 <div id="div1">Content</div>
 <div id="div2">Content</div>
</div>

2つの中央のdiv（1,2）は、width：100％とmax-width：390pxにfloatLeftを加えたものです。ブラウザのサイズを変更すると、div2は行を下にジャンプし、幅が390未満になると、両方ともサイズ変更を開始します。

必要なのは、最初に最小幅にサイズ変更してから、2行目にジャンプすることです。

それ、どうやったら出来るの？

Edit1：例：http ：//jsfiddle.net/dwDZx/

4

1 に答える 1

1

これがあなたが求めているもののレスポンシブな例です。いくつかの幅を変更して、例に従い、数字がどこから来ているかを確認しやすくしました。 http://jsfiddle.net/dwDZx/4/

レスポンシブレイアウトごとに背景色を変更して、ブラウザのサイズ変更のどの時点でどのセクションがアクティブになっているかを示します。

マークアップに加えた唯一の変更は、div1とdiv2内に「コンテンツ」divを作成することでした。これにより、境界線を設定することができました。div1とdiv2の幅を50％に設定し、境界線を設定すると、合計幅は50％+ 2px（1px左+ 1px右）になり、フロートが折り返されます。コンテンツdivに境界線を配置することにより、境界線を外側ではなく50％の内側に配置します。

CSS：

* { margin: 0; padding: 0; }

.content { border: 1px solid black; }

#div1, #div2
{
        float:left;
}

@media (min-width: 801px)
{
    #div1, #div2
    {
        width:          400px;
        background: green;
    }
}

@media (min-width: 400px) and (max-width: 800px)
{
    #div1, #div2
    {
        width: 49.9%;
    background: red;
    }        
}

@media (max-width: 399px)
{
    #div1, #div2
    {
        float: none;
        width: 100%;
    }
}

編集：私はそれについて考え、物事を少し単純化しました。http://jsfiddle.net/dwDZx/5/を参照してください 。CSSは次のように変更されます。親divのmax-widthをdiv1+div2の最大幅に設定します。次に、必要なメディア状態は1つだけです。400px未満で、1行に配置する必要がある場合です。

CSS：

* { margin: 0; padding: 0; }

.content { border: 1px solid black; }
#container { max-width: 800px; }

#div1, #div2
{
    float:left;
    width: 50%;
    background: green;
}

@media (min-width: 400px) and (max-width: 800px)
{
    #div1, #div2
    {
        background: red;
    }        
}

@media (max-width: 399px)
{
    #div1, #div2
    {
        float: none;
        width: 100%;
        background: blue;
    }
}
于 2012-12-20T18:57:57.723 に答える