html - 具有多个元素的 CSS float 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;
}

查看我的 fiddle :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>