如何垂直包裝div然後水平包裝

Question

我需要在我的網站中水平顯示搜索結果數據。我遵循我的網站的地鐵UI方法，所以我希望數據能夠水平流動而不是垂直流動。

我需要什麼證明下面的圖片中：

所得數據是動態的。我想先根據父div高度垂直繪製div，然後水平繪製。類似於WPF包裝面板，但我還沒有能夠實現它。

這是我已經盡力了，水平然後垂直拉伸：

小提琴：http://jsfiddle.net/4wuJz/2/

HTML：

<div id="wrap"> 
    <div id="wrap1"> 
     <div class="result"> 
      <div class="title">1</div> 
      <div class="postcontent"> 
       <p>Test</p> 
      </div> 
     </div> 

     <div class="result"> 
      <div class="title">2</div> 
      <div class="postcontent"> 
       <p>Test</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

#wrap { 
    width:100%; 
    height: 500px; 
    background-color: rgba(0,0,0,0.5); 
    overflow:scroll; 
    overflow-y:hidden; 
} 

#wrap1 { 
    width:2500px; 
    height:500px; 
    text-align: center; 
} 


.result { 
    width: 300px; 
    vertical-align: middle; 
    float:left; 
    background: rgba(120,30,20,0.5); 
    padding: 10px; 
    margin: 30px 0px 30px 30px; 
} 

我怎樣才能改變我的合作德，以便我達到預期的輸出？任何jQuery插件可用於此？

Answer 1

將clear: left添加到.result類，以便您的箱子垂直堆放。

然後將結果換成3塊並水平地浮動這些塊。你可以做任何一個後端語言，你可能會使用到的結果輸出標記或使用jQuery這個邏輯：

$('.result:nth-child(3n+1)').each(function() { 
    $(this).add($(this).next().next().addBack()).wrapAll('<div style="float:left"></div>'); 
}); 

Fiddle

---

這裏有一個更靈活的解決方案，重新計算的窗口調整大小：Demo。

注意：它假定所有的箱子都有相同的高度。如果不是這種情況，您可以在resultHeight變量中硬編碼max-height。

$(window).resize(function() { 
    var resultHeight = $('.result:first').outerHeight(true), 
     nRows = Math.floor($('#wrap1').height()/resultHeight); 

    $('.results-column').contents().unwrap(); 
    $('.result:nth-child('+nRows+'n+1)').each(function() { 
     $(this).nextAll().slice(0, nRows-1).add(this).wrapAll('<div class="results-column"></div>'); 
    }); 
}).resize(); 

新增CSS：

#wrap1 { 
    white-space: nowrap; 
} 
.results-column { 
    display: inline-block; 
    vertical-align: top; 
} 

---

還檢查了Isotope其cellsByColumn/fitColumns佈局。

---

最後，您的使用案例是使用Flexible Box Layout的主要示例。我還沒有提到這一點，因爲已經有展示該解決方案的其他答案，還因爲它是相當困難，使跨瀏覽器的時刻：

• 火狐< = 27，IE10和Safari < = 6支持舊版本的規格
• 較新的Chrome，Safari和IE11支持新的語法
• 不能忘記所有的瀏覽器前綴！

參考：http://caniuse.com/flexbox

雖然，一切都沒有丟失。如果您今天想要使用Flexbox，則有一個非常有用的Flexbox generator。使用Flexbox的

只CSS的解決方案：Demo

#wrap1 { 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-direction: normal; 
    -moz-box-direction: normal; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 
    -webkit-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
    -webkit-box-pack: start; 
    -moz-box-pack: start; 
    -webkit-justify-content: flex-start; 
    -ms-flex-pack: start; 
    justify-content: flex-start; 
    -webkit-align-content: flex-start; 
    -ms-flex-line-pack: start; 
    align-content: flex-start; 
    -webkit-box-align: start; 
    -moz-box-align: start; 
    -webkit-align-items: flex-start; 
    -ms-flex-align: start; 
    align-items: flex-start; 
} 

我測試過這個解決方案，它工作正常在IE10，IE11，Chrome 31或更高，歌劇18和Firefox 29每晚。

注意： Firefox < = 27不支持具有多行/列的Flexbox（不支持flex-wrap: wrap）。我已經在Firefox 29（夜間）上測試了它，並且它正常工作，所以我認爲它應該儘快穩定着陸。

Answer 2

那麼Flexbox將是一個JavaScript少的解決方案：

#wrap1 { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
} 

演示：http://jsfiddle.net/4wuJz/5/

Answer 3

爲此，您可以用display:flex

檢查分叉codepen演示：http://codepen.io/surjithctly/pen/zolcF

閱讀更多here

HTML

<ul class="flex-container"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
</ul> 

CSS

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    max-height:600px; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: column wrap; 
    justify-content: space-around; 
} 

.flex-item { 
    background: tomato; 
    padding: 5px; 
    width: 200px; 
    height: 150px; 
    margin-top: 10px; 

    line-height: 150px; 
    color: white; 
    font-weight: bold; 
    font-size: 3em; 
    text-align: center; 
} 

Answer 4

您可以簡單地使用CSS列，而無需改變太多的代碼：

div.wrap { 
    width: 100%; 
    height: 300px;  
    -webkit-column-width: 100px; 
     -moz-column-width: 100px; 
      column-width: 100px; 
    -webkit-column-gap: 16px; 
     -moz-column-gap: 16px; 
      column-gap: 16px; 
} 

檢查此琴：http://jsfiddle.net/Be9B3/