垂直對齊頂部具有相同寬度，而不是高度的多個div。沒有「行」

Question

我想vertical-align到我的所有項目的頂部。沒有「行」。就像這樣：

我使用了一些flexbox屬性，但沒有運氣。這是我現在有：

我發現了一個「不完美」的解決方案，工程（http://jsfiddle.net/Lstgwmgb/），但這種解決方案需要使用額外的div，所以響應不工作，你有用JS把他們equaly藍色列一旦我被困在相同的，所以我切換到jquery實現這一目標（請觀看下面）

Answer 1

。

JSFIDDLE

下面是代碼：

var $boxes; 
 

 
$(document).ready(function() { 
 
    $boxes = $(".box"); 
 
    setupColumns(); 
 
    $(window).on("resize", setupColumns); 
 
}); 
 

 
function setupColumns() { 
 
    var $columnwrapper = $("#columns"); 
 
    //////////start change//////////// 
 
    var dummy = $("<div>").addClass("column"); 
 
    dummy.appendTo($columnwrapper); // add it to wrapper so that it gets displayed 
 
    var w = dummy.width(); // this now returns 114 
 
    dummy.remove(); // now that we have got the width, remove it 
 

 
    // just to be on safer side: 
 
    if (w == 0) { 
 
    console.log("column width is 0."); 
 
    return; 
 
    } 
 

 
    //////////end change//////////// 
 
    var cnt = Math.floor($columnwrapper.width()/w); 
 
    var cols = []; 
 
    for (var i = 0; i < cnt; i++) { 
 
    var $col = $("<div>").addClass("column"); 
 
    cols.push($col); 
 
    } 
 
    $columnwrapper.append(cols); 
 
    var cnt = 0; 
 
    $boxes.each(function() { 
 
    $(this).detach().appendTo(cols[cnt]); 
 
    cnt = (cnt + 1) % cols.length; 
 
    }); 
 
}

.column { 
 
    width: 114px; 
 
    float: left 
 
} 
 

 
.box { 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid; 
 
    margin-bottom: 10px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="columns"></div> 
 
<div class="box" style="height:100px">HELLO WORLD 1</div> 
 
<div class="box" style="height:120px">HELLO WORLD 2</div> 
 
<div class="box" style="height:70px">HELLO WORLD 3</div> 
 
<div class="box" style="height:90px">HELLO WORLD 4</div> 
 
<div class="box" style="height:170px">HELLO WORLD 5</div> 
 
<div class="box" style="height:70px">HELLO WORLD 6</div> 
 
<div class="box" style="height:50px">HELLO WORLD 7</div> 
 
<div class="box" style="height:70px">HELLO WORLD 8</div> 
 
<div class="box" style="height:80px">HELLO WORLD 9</div> 
 
<div class="box">HELLO WORLD 10</div>