我需要在我的网站上水平显示搜索结果数据.我按照我的网站的地铁UI方式,所以我希望数据水平而不是垂直.
我需要的是在下面的图像中演示：
结果数据是动态的.我想先根据父div高度然后水平绘制divs.与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.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;
}
解决方法
添加清楚：留给.result类,使您的盒子垂直堆叠.
然后以3的方式包装结果并水平浮动这些块.您可以使用您可能使用的任何后端语言来输出结果标记或使用jQuery来执行该逻辑：
$('.result:nth-child(3n+1)').each(function() {
$(this).add( $(this).next().next().addBack() ).wrapAll('<div style="float:left"></div>');
});
注意：它假定所有框具有相同的高度.如果不是这样,您可以在resultHeight变量中对最大高度进行硬编码.
$(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的cellByColumn / fitColumns布局.
最后,您的用例是使用Flexible Box Layout的主要示例.我还没有提到这一点,因为已经有其他答案显示了这个解决方案,也是因为现在很难使跨浏览器：
> Firefox< = 27,IE10和Safari< = 6支持旧版本的规范
>较新的Chrome,Safari和IE11支持新的语法
>不能忘记所有的浏览器前缀！
虽然,一切都没有失去.如果您今天要使用FlexBox,那么Flexbox generator非常有用.
#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,Opera 18和Firefox 29中正常工作.
注意：Firefox< = 27不支持具有多个行/列的FlexBox(它不支持flex-wrap：wrap).我已经在Firefox 29(夜间)测试了它,它的工作正常,所以我相信它应该稳定下来.
