如何垂直包装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/