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

时间:2018-10-05 16:51:38

标签: css css-float masonry

在移动设备上,我有1列高度不同的DIV。 使用CSS,在较大的屏幕上,我需要2列,我指定的DIV堆叠在左列,其他的堆叠在右列(如下图所示)。 我在为某些人考虑div-class =“ right”,为其他人考虑div-class =“ left”。 有没有办法用浮子做到这一点,或者我必须走砌石路线?

https://imgur.com/a/Zalc0qO

2 个答案:

答案 0 :(得分:0)

您可以尝试display:flex。应该可以。

答案 1 :(得分:0)

我也建议使用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>

这是一个可以玩的codepen。如果您更改容器的宽度,则可以看到行为。

CodePen