如何垂直地然后水平地包裹div
我需要水平地在我的网站上显示搜索结果数据。 我遵循我的网站的地铁UI方法，所以我希望数据水平流动而不是垂直流动。
我需要的内容如下图所示：
结果数据是动态的。 我想首先根据父div高度垂直绘制div，然后水平绘制div。 类似于WPF包装面板的东西，但我还没有实现它。
这是我尝试过的，水平绘制然后垂直绘制：
小提琴 ： http ： //jsfiddle.net/4wuJz/2/
HTML：
1 Test
2 Test
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插件？
添加clear: left为.result类，以便您的框垂直堆叠。
然后将结果包装为3个块并水平浮动这些块。 您可以使用您可能用于输出结果标记或jQuery的任何后端语言来执行该逻辑：
$('.result:nth-child(3n+1)').each(function() { $(this).add( $(this).next().next().addBack() ).wrapAll(''); });
小提琴
这是一个响应更快的解决方案，它在窗口resize时重新计算： 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(''); }); }).resize();
添加了CSS：
#wrap1 { white-space: nowrap; } .results-column { display: inline-block; vertical-align: top; }
另请查看Isotope及其cellsByColumn / fitColumns布局。
最后，您的使用案例是使用Flexible Box Layout的一个主要示例。 我还没有提到这一点，因为已经有其他答案显示了这个解决方案，而且因为目前很难制作跨浏览器：
- Firefox <= 27，IE10和Safari <= 6支持旧版规范
- 较新的Chrome，Safari和IE11支持新语法
- 不能忘记所有的浏览器前缀！
参考： http ： //caniuse.com/flexbox
虽然，一切都没有丢失。 如果你想今天使用Flexbox，那么有一个非常有用的Flexbox生成器 。
使用Flexbox的纯CSS解决方案： 演示
#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 <= 27不支持具有多个行/列的Flexbox（它不支持flex-wrap: wrap ）。 我已经在Firefox 29上测试了这个（每晚），它运行正常，所以我相信它应该很快就能稳定下来。
Flexbox将是一个无JavaScript的解决方案：
#wrap1 { display: flex; flex-wrap: wrap; flex-direction: column; }
演示： http ： //jsfiddle.net/4wuJz/5/
您可以简单地使用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/
您可以使用display:flex执行此操作
检查forked codepen demo： http ：//codepen.io/surjithctly/pen/zolcF
在这里阅读更多
HTML
- 1
- 2
- 3
- 4
- 5
- 6
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; }