如何包装一个div垂直然后水平 [英] How to wrap a div vertically and then horizontally

问题描述

我需要在我的网站中水平显示搜索结果数据。我按照我的网站的地铁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>测试< / p> 
< / div> 
< / div> 
 
< div class =result> 
< div class =title> 2< / div> 
< div class =postcontent> 
< p>测试< / p> 
< / div> 
< / div> 
< / div> 
< / div> 
  

CSS

 c $ c> #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 类，因此您的框垂直堆叠。

水平。您可以使用任何后端语言来输出结果标记或使用jQuery来执行该逻辑：

  $ '.result：nth-​​child（3n + 1）'）。each（function（）{
 $（this）.add（$（this）.next（）。next（）。addBack（））。 wrapAll（'< div style =float：left>< / div>'）; 
}）; 
  

Fiddle

---

这是一个响应速度更快的解决方案， a href =http://jsfiddle.net/4wuJz/12/> 演示 。

注意：所有框都具有相同的高度。您可以在 resultHeight 变量中对 max-height 进行硬编码，如果不是这样。

  $（window）.resize（function（）{
 var resultHeight = $（'。result：first'）。outerHeight 
 nRows = Math.floor（$（'＃wrap1'）。height（）/ resultHeight）; 
 
 $（'。results-column'）。contents（）。unwrap ; 
 $（'。result：nth-​​child（'+ nRows +'n + 1）'）。each（function（）{
 $（this）.nextAll -1）.add（this）.wrapAll（'< div class =results-column>< / div>'）; 
}）; 
}）resize 
  

添加CSS：

 ＃wrap1 {
 white-space：nowrap; 
} 
 .results-column {
 display：inline-block; 
 vertical-align：top; 
} 
  

---

href =http://isotope.metafizzy.co/demos/elements-complete.html>同位素及其 cellByColumn / fitColumns 布局。

---

最后，您的用例是使用弹性框布局。我还没有提到这个，因为已经有其他答案显示这个解决方案，也因为很难使跨浏览器的时刻：

• Firefox< = 27，IE10和Safari< = 6支持旧版本的规范


• 较新的Chrome，Safari和IE11支持新语法


• 不能忘记所有浏览器前缀！

参考：http://caniuse.com/flexbox

虽然，所有都没有遗失。如果您今天想要使用Flexbox，则有一个非常实用的 Flexbox生成器。

使用Flexbox的仅限CSS解决方案： 演示

 ＃wrap1 {
 display：-webkit-box; 
 display：-moz-box; 
显示：-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

Firefox< = 27不支持包含多个行/列的Flexbox它不支持 flex-wrap：wrap ）。我已经测试了这个在Firefox 29（每晚），它的工作正常，所以我相信它应该很快稳定下来足够了。

I need to show the search result data in my site horizontally. I follow a metro UI approach for my website, so I want the data to flow horizontally instead of vertically.

What I require is demonstrated in the below image:

The resulted data is dynamic. I want to draw the divs vertically first based on the parent div height and then horizontally. Something similar to WPF wrap panel, but I haven't been able to achieve it yet.

This is what I have tried, drawing horizontally and then vertically:

Fiddle: 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; 
}

How can I change my code so that I meet the desired output? Any jQuery plugins available for this?

解决方案

Add clear: left to the .result class so your boxes are stacked vertically.

Then wrap results in blocks of 3 and float these blocks horizontally. You can do that logic with whichever back-end language you may be using to output the results markup or with jQuery:

$('.result:nth-child(3n+1)').each(function() {
    $(this).add( $(this).next().next().addBack() ).wrapAll('<div style="float:left"></div>');
});

Fiddle

---

Here's a more responsive solution which re-calculates on window resize: Demo.

Note: it assumes all boxes have the same height. You can hardcode a max-height in the resultHeight variable if that's not the case.

$(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();

Added CSS:

#wrap1 {
    white-space: nowrap;
}
.results-column {
    display: inline-block;
    vertical-align: top;
}

---

Also check out Isotope with its cellsByColumn/fitColumns layouts.

---

And lastly, your use case is a prime example for the use of the Flexible Box Layout. I haven't mentioned this yet because there are already other answers showing this solution, and also because it is rather hard to make cross-browser at the moment:

• Firefox <= 27, IE10 and Safari <= 6 support an old version of the spec
• Newer Chrome, Safari and IE11 support the new syntax
• Can't forget all the browser prefixes!

Reference: http://caniuse.com/flexbox

Though, all is not lost yet. If you want to use Flexbox today, there's a very useful Flexbox generator.

CSS-only solution using Flexbox: 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;
}

I've tested this solution and it works correctly in IE10, IE11, Chrome 31, Opera 18 and Firefox 29 Nightly.

Note: Firefox <= 27 does not support Flexbox with more than one row/column (it does not support flex-wrap: wrap). I've tested this on Firefox 29 (nightly) and it works correctly, so I believe it should land on stable soon enough.

这篇关于如何包装一个div垂直然后水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！