responsive-design - 是否可以对乱序元素进行响应式设计？

Question

当屏幕分辨率大于 1000 像素时，我将 A、B 和 C 分别设置为 280、350 和 210 像素）

当它缩小时，我希望它是 B 最大宽度，然后是 A 和 C 聚集在一个 div 中并缩小。我不确定我可以用直接的 CSS 来做到这一点，因为元素是乱序的——还是我错了？谢谢！

Answer 1

你可以用 CSS3 做这样的事情。但这依赖于 rowA 在页面宽度小于 1000 像素时处于绝对位置。还有其他解决方法可以使用 js 动态更改它的 margin-top，以便无论内容高度发生变化，col A 都会保持它的位置。

    .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>