我需要水平显示我网站中的搜索结果数据。我遵循我的网站的地铁UI方法,所以我希望数据水平流动而不是垂直流动。
我需要的内容如下图所示:
结果数据是动态的。我想首先根据父div高度垂直绘制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插件?
答案 0 :(得分:7)
将clear: left
添加到.result
类,以便您的框垂直堆叠。
然后将结果包装为3个块并水平浮动这些块。您可以使用您可能用于输出结果标记或jQuery的任何后端语言来执行该逻辑:
$('.result:nth-child(3n+1)').each(function() {
$(this).add( $(this).next().next().addBack() ).wrapAll('<div style="float:left"></div>');
});
这是一个响应更快的解决方案,可以在窗口调整大小时重新计算:Demo。
注意:它假设所有方框都有相同的高度。如果情况并非如此,您可以对max-height
变量中的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;
}
同时使用cellsByColumn
/ fitColumns
布局查看Isotope。
最后,您的用例是使用Flexible Box Layout的一个主要示例。我还没有提到这一点,因为已经有其他答案显示这个解决方案,而且因为目前很难制作跨浏览器:
尽管如此,一切都没有丢失。如果你想今天使用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,Opera 18和Firefox 29 Nightly中正常运行。
注意: Firefox&lt; = 27不支持具有多个行/列的Flexbox(它不支持flex-wrap: wrap
)。我已经在Firefox 29上测试了这个(每晚)并且它工作正常,所以我相信它应该很快就会稳定下来。
答案 1 :(得分:4)
Flexbox将是一个无JavaScript的解决方案:
#wrap1 {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
答案 2 :(得分:2)
您只需使用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/
答案 3 :(得分:0)
您可以使用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;
}