我正在开发一个响应式网站,遇到了一个有趣的问题。我有一些并排的 div。可能有 2 到 6 个左右。当屏幕不够宽而无法正确显示所有内容时,div 会垂直堆叠。使用 CSS 就足够简单了。
问题是,我需要它们根据布局采用不同的顺序。这很容易用 2 或 3 个 div 来完成(根据宽度更改 div 顺序 https://stackoverflow.com/questions/22159235/changing-divs-order-based-on-width),但当您添加第四个时,挑战明显更大。
我可以用position: absolute;
并手动设置位置,但这会导致父级缩小并且无法正确包含它们。
更复杂的是,我无法使用 JavaScript。
使用两列:
(未经测试)
HTML:
<div id="container">
<div class="column-half column-half-2">
First div on mobile, right div on desktop
</div>
<div class="column-half column-half-1">
Second div on mobile, left div on desktop
</div>
</div>
CSS:
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 20px;
position: relative;
}
.column-half {
display: table-cell;
padding: 25px;
vertical-align: top;
width: 40%;
}
.column-half-1 {
float: left;
}
.column-half-2 {
float: right;
}
HTML,有 4 列:
<div id="container">
<div class="column-quarter column-quarter-3">
First div on mobile, third div on desktop
</div>
<div class="column-quarter column-quarter-2">
Second div on mobile, second div on desktop
</div>
<div class="column-quarter column-quarter-1">
Third div on mobile, first div on desktop
</div>
<div class="column-quarter column-quarter-4">
Fourth div on mobile, fourth div on desktop
</div>
</div>