具有多个元素的 CSS 浮动 2 列布局

Question

我想使用四个 div 创建一个简单的两列布局。我受到限制，无法修改 HTML 结构。我只能修改 CSS。

我希望右列中的第二个 div 直接位于前一个右列 div 的下方。现在，它推到左第二个 div 的顶部。

现在这是我在 HTML 中所拥有的：

<div id="parent">
    <div class="left">
        Left 1
    </div>
    <div class="right">
        Right 1
    </div>
    <div class="left">
        Left 2
    </div>
    <div class="right">
        Right 2
    </div>
</div>

CSS：

.left {
  height: 400px;
  width: 60%;
  float: left;
  background-color: red;
  display: block;
}
.right {

  width: 30%;
  float: right;
  background-color: green;
   display: block;
}

看我的小提琴：http://jsfiddle.net/Lun61g7a/2/

Answer 1

使用flexbox 并在需要时允许元素移动到下一个“行”

#parent {
  display: flex;
  flex-wrap: wrap;
}

.left {
  height: 400px;
  width: 60%;
  background-color: red;
  display: block;
}

.right {
  width: 30%;
  background-color: green;
  display: block;
}

<div id="parent">
  <div class="left">
    Left 1
  </div>
  <div class="right">
    Right 1
  </div>
  <div class="left">
    Left 2
  </div>
  <div class="right">
    Right 2
  </div>
</div>