我正在设计如下所示的 3 列网页布局。
为了使其具有响应性,我指定了以 % 为单位的宽度、以像素为单位的最小宽度和 float:left
。现在,如果我调整页面大小,所有 3 个 DIV(1、2 和 3)首先调整大小,然后第 3 个 DIV 移动到第 1 个 DIV 下方。如果我调整更多,则第二个 DIV 移动到第一个下方,第三个移动到第二个下方。
这是因为 float 属性。但是我想以这样的方式修改它,即应该首先移动第 3 个 DIV(因为它已经存在)然后应该移动第 1 个 DIV 而不是第 2 个 DIV。第二个 DIV 必须在顶部。
我该怎么做?
最佳答案
可以使用 Flexbox 进行重新排序。但是,您需要 1 个媒体查询。
http://codepen.io/cimmanon/pen/fwqed
body {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
div {
-webkit-flex: 1 1 20em;
-ms-flex: 1 1 20em;
flex: 1 1 20em;
}
@media (max-width: 40em) {
.a, .c {
-ms-flex-order: 1;
-webkit-order: 1;
order: 1;
}
}
.a {
background: orange;
}
.b {
background: yellow;
}
.c {
background: grey;
}
重新排序也可以通过相对定位来完成(参见:https://stackoverflow.com/questions/16307621/reordering-elements-at-specific-browser-widths)。
关于css - 响应式网页设计场景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17382480/