複数の異なる高さ浮動小数点左の要素を2列に配置

Question

これは空白に問題があります。複数のfloat：left要素があり、2列に配置する必要があり、すべて高さが異なります。

やすいように、私はもちろんのパディングを維持する1要素の後に右のように、画像内の要素3を必要としています。

私はプレーンを使用して100％ですが、Vainilla CSSとAngularJSとしましょう。エレメントがロードされているときにJSモジュールを使用しないようにしたいと思います。 最も重要：100％Jqueryを避ける必要があります。

重要なアップデート：左、フロート：右approch（子供が偶数か奇数の場合）： Float multiple fixed-width/varible-height boxes into 2 columns

重要な更新：いくつかのケースでは

フロートを使用することはできません私は2つの要素だけを適用する必要があります。だから私は要素1にプロパティを適用しようとしています。

Answer 1

列の向きでCSSフレックスレイアウトを使用します。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

または列のCSSプロパティで石工のアプローチを使用します： あなたはCSSTricksから非常に良い説明を読むことができます

#container { 
 
    width: 100%; 
 
    max-width: 700px; 
 
    margin: 2em auto; 
 
} 
 
.cols { 
 
    -moz-column-count:3; 
 
    -moz-column-gap: 3%; 
 
    -moz-column-width: 30%; 
 
    -webkit-column-count:3; 
 
    -webkit-column-gap: 3%; 
 
    -webkit-column-width: 30%; 
 
    column-count: 3; 
 
    column-gap: 3%; 
 
    column-width: 30%; 
 
} 
 
.box { 
 
    margin-bottom: 20px; 
 
} 
 
.box.one { 
 
    height: 200px; 
 
    background-color: #d77575; 
 
} 
 
.box.two { 
 
    height: 300px; 
 
    background-color: #dcbc4c; 
 
} 
 
.box.three { 
 
    background-color: #a3ca3b; 
 
    height: 400px; 
 
} 
 
.box.four { 
 
    background-color: #3daee3; 
 
    height: 500px; 
 
} 
 
.box.five { 
 
    background-color: #bb8ed8; 
 
    height: 600px; 
 
} 
 
.box.six { 
 
    background-color: #baafb1; 
 
    height: 200px; 
 
}

<div id="container" class="cols"> 
 
    <div class="box one"></div> 
 
    <div class="box two"></div> 
 
    <div class="box one"></div> 
 
    <div class="box three"></div> 
 
    <div class="box two"></div> 
 
    <div class="box five"></div> 
 
    <div class="box one"></div> 
 
    <div class="box two"></div> 
 
    <div class="box six"></div> 
 
    <div class="box three"></div> 
 
    <div class="box two"></div> 
 
</div>