Divs不会浮动我的意思

Question

我在一个div中有5个div，我会让它在左边漂浮2，在右边漂浮3：

＆＃13;

＆＃13;

.container {
  height: 400px;
  border: 1px solid black;
}
.first, .second, .third, .fourth, .fifth {
  width: 50%;
}

.first {
  height: 300px;
  background-color: red;
  float: left;
}

.second {
  height: 100px;
  background-color: blue;
  float: left;
}

.third {
  height: 100px;
  background-color: green;
  float: right;
}

.fourth {
  height: 200px;
  background-color: yellow;
  float: right;
}

.fifth {
  height: 100px;
  background-color: aquamarine;
  float: right;
}

＆＃13;

<div class="container">
    <div class="first"> FIRST </div>
    <div class="second"> SECOND </div>
    <div class="third"> THIRD </div>
    <div class="fourth"> FOURTH</div>
    <div class="fifth"> FIFTH </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望他们被安置：

FIRST and SECOND at left
THIRD, FORTH and FIFTH at right.
Instead, they are placed like:
FIRST and FIFTH at left
SECOND, THIRD and FOURTH at right.

你知道怎么修理吗？这里有我的代码：https://jsfiddle.net/82bkdbpn/

Answer 1

由于您已在container元素上定义了固定高度，因此您可以使用Flexbox执行此操作并定义flex-direction: column。

＆＃13;

＆＃13;

.container {
  height: 400px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.first, .second, .third, .fourth, .fifth {
  width: 50%;
  height: 100px;
}
.first {
  height: 300px;
  background-color: red;
}
.fourth {
  height: 200px;
  background-color: yellow;
}
.second {background-color: blue;}
.third {background-color: green;}
.fifth {background-color: aquamarine;}

＆＃13;

<div class="container">
  <div class="first"> FIRST </div>
  <div class="second"> SECOND </div>
  <div class="third"> THIRD </div>
  <div class="fourth"> FOURTH</div>
  <div class="fifth"> FIFTH </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将div包装在Columns中，然后浮动这两个。或者您可以使用flexbox，Nenad Vracar对此有一个非常好的答案。

以下是两个列包装器div元素的示例：

＆＃13;

＆＃13;

.container {
  height: 400px;
  border: 1px solid black;
}

.col {
  width: 50%;
  float: left;
}

.first {
  height: 300px;
  background-color: red;
}

.second {
  height: 100px;
  background-color: blue;
}

.third {
  height: 100px;
  background-color: green;
}

.fourth {
  height: 200px;
  background-color: yellow;
}

.fifth {
  height: 100px;
  background-color: aquamarine;
}

＆＃13;

<div class="container">
  <div class="col">
    <div class="first"> FIRST </div>
    <div class="second"> SECOND </div>
  </div>
  <div class="col">
    <div class="third"> THIRD </div>
    <div class="fourth"> FOURTH</div>
    <div class="fifth"> FIFTH </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;