responsive-design - 順不同の要素に対してレスポンシブ デザインを行うことは可能ですか?

Question

画面解像度が 1000px を超える場合、A、B、C はそれぞれ 280、350、210px になります)

縮小すると、Bの最大幅になり、その後にAとCがdivにまとめられて縮小されます。要素が順不同であるため、ストレートCSSでこれを実行できるかどうかわかりません-または、ここで間違っていますか? ありがとう！

Answer 1

CSS3でこのようにすることができます。ただし、これは、ページ幅が 1000px 未満になると絶対位置にある rowA に依存します。コンテンツの高さが変更されても、列 A がその位置を保持するように、js を使用してそのマージントップを動的に変更する他の回避策があります。

    .body{ margin:0;padding:0;
}
#rowA {
    width:25%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: blue;
}
#rowB {
    width:50%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: red;
}
#rowC {
    //border:1px solid #000;
    width:25%;
    float:left;
    //margin:10px;
    min-height:340px;
    margin:0;padding:0;
    background-color: blue;
}
#colA, #colB, #colC {

    min-height:330px;
    margin:5px;padding:0;
    background-color: green;
    text-align:center;
}

@media (max-width: 1000px) {
    #rowB {
        width:100%;
        clear:left;
    }
    #rowA {
        width:50%;
        position:absolute;
        margin-top:340px;
    }
    #rowC {
        width:50%;
        clear:left;
        float:right;
    }

}

ボディタグ内。

    <div class="grid">
<span id="rowA"><div id="colA">col A</div></span><span id="rowB"><div id="colB">col B</div></span><span id="rowC"><div id="colC">col C</div></span>