如何垂直然后水平地包裹div

时间:2013-12-23 12:18:42

标签: jquery css

我需要水平显示我网站中的搜索结果数据。我遵循我的网站的地铁UI方法,所以我希望数据水平流动而不是垂直流动。

我需要的内容如下图所示:

Desired OutPut

结果数据是动态的。我想首先根据父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插件?

4 个答案:

答案 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>');
});

Fiddle


这是一个响应更快的解决方案,可以在窗口调整大小时重新计算: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的一个主要示例。我还没有提到这一点,因为已经有其他答案显示这个解决方案,而且因为目前很难制作跨浏览器:

  • Firefox&lt; = 27,IE10和Safari&lt; = 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,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;
}

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

答案 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;
}