潛水員不會像我那樣浮動

Question

我在一個div中有5個div，我將使其在左側浮動2，在右側浮動3：

 .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; } 

 <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> 

我希望將它們放置在：

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 。

 .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;} 

 <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> 

Answer 2

您可以將div包裝在Columns中，然后將這兩個浮動。 或者，您可以使用flexbox ， Nenad flexbox對此提供了很好的答案。

這是帶有兩個列包裝div元素的示例：

 .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; } 

 <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>