在响应式 1 到 2 列布局中 - 如何指定 DIV 是堆叠在第 1 列还是第 2 列中?

Question

在移动设备上，我有 1 列不同高度的 DIV。 使用 CSS，在较大的屏幕上，我想要 2 列，我指定的 DIV 堆叠在左列中，其他的堆叠在右列中(如下图所示(。 我在想div-class="right" 对于某些人来说，而div-class="left" 对于其他人来说。 有没有办法用花车做到这一点，或者我必须走砖石路线？

https://imgur.com/a/Zalc0qO

Answer 1

你可以试试display：flex。应该工作。

Answer 2

我也建议使用 flex;有关示例，请参见下面的代码。

.container {
display:flex; 
flex-direction: row; 
flex-wrap: wrap; 
width: 440px; 
border: 2px solid red; 
}
.child {
height: 200px; 
width: 200px; 
margin: 10px; 
background: blue; 

}
.child.left {
background: green; 
}

<div class="container">
<div class="child left"></div>
<div class="child right"></div>
<div class="child left"></div>
<div class="child right"></div>
<div class="child left"></div>
</div>

这是一个代码笔可以玩。如果更改容器的宽度，则可以看到该行为。

代码笔