css – 我如何向左(彼此之下)和两个div(彼此之下)浮动两个div

我正在尝试这个：

DIV 1    DIV 3
DIV 2    DIV 4

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

我试图使用清楚：两者但它是一个上限.

在这种情况下,使用其他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;
}

解决方法

尝试更改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/