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

Question

当屏幕分辨率大于1000px时，我的A，B和C分别为280,350和210px）

当它缩小时，我希望它是B最大宽度，然后是A和C在div中聚集在一起并缩小。我不确定我能用直接的CSS做这个因为元素乱序 - 或者我错在这里？谢谢！

Answer 1

你可以用CSS3这样做。但是，一旦页面宽度小于1000px，这依赖于rowA处于绝对位置。还有其他解决方法可以动态更改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>