css - 如何将两个 div 向左(彼此下方) float ，将两个 div 向右浮动(彼此下方)

Question

我正在尝试这个:

DIV 1    DIV 3
DIV 2    DIV 4

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

我正在尝试使用 clear:both 但它产生了最高利润..

在这种情况下，不能使用其他 div 向左浮动 1 和 2，向右浮动 3 和 4。

这是我的CSS:

.div1 {
  height:69px;
  float:left;
  width:48%;
  clear:both;
  background:pink;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  clear:both;
  background:lightblue;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:both;
}

Answer 1

尝试更改 HTML 的顺序并更改 div 的清除。

<div class="div1"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div4"></div>

和 CSS

.div1 {
  height:69px;
  float:left;
  width:48%;
  background:pink;
  clear:left;
}

.div2 {
  height:200px;
  margin-top:10px;
  display:block;
  float:left;
  width:48%;
  background:lightblue;
  clear:left;
}

.div3 {
  height:69px;
  line-height:30px;
  float:right;
  width:48%;
  background:red;
  clear:right
}

.div4 {
  height:200px;
  float:right;
  width:48%;
  background:yellow;
  clear:right
}

JSFiddle:https://jsfiddle.net/6ywja6dn/