得到固定的高度div继续下一行 [英] getting fixed height div to continue on next line

问题描述

不确定这是可能的，但在机会，这里是我需要：

• 100px




• div中未知数量的项目，它们在父div的顶部和底部边框内水平显示。




• 重要的是，如果div中包含更多可以水平放置的项目，则div应该继续下面的一行新项目。第二行也应该在父div的顶部和底部边框之间水平显示项目。我不想让div只是增加高度并开始一个新行，因为这将不允许顶部和底部边框出现在每一行项目的上方和下方。

>

解决方案

您可以设置包装器的宽度，并将那些高度为100px的块放入其中。

以下是示例： http://jsfiddle.net/BVm5h/

代码：

 < div class =wrapper> 
< div class =myClass> 1< / div> 
< div class =myClass> 2< / div> 
< div class =myClass> 3< / div> 
< div class =myClass> 4< / div> 
< div class =myClass> 5< / div> 
< div class =myClass> 6< / div> 
< div class =myClass> 7< / div> 
< div class =myClass> 8< / div> 
< div class =myClass> 9< / div> 
< div class =myClass> 10< / div> 
< / div> 
  

CSS：

 code> .wrapper {width：600px;} 
 
 .myClass {
 border-top：1px solid＃FF0000; 
 border-bottom：1px solid＃FF0000; 
 width：100px; 
 height：100px; 
 float：left; 
 margin-top：5px; 
} 
 
 div.myClass：last-child {
 width：100％; 
} 
  

JS

  var no = $（'div.myClass'）。 
 var wlength = $（'div.wrapper'）。width（）; 
 var length = $（'div.myClass'）。width（）; 
 var tno = no * length; 
 while（wlength< tno）
 tno = tno-wlength; 
 var mw = wlength + length-tno; 
 $（'div.myClass'）。last（）。css（'max-width'，mw）; 
  

通过更改包装器的宽度，

编辑：添加JS，如果最后一个元素要扩展整个行。

Not at all sure that this is possible but on the off-chance, here is what I need:

• 100px high div with top and bottom border.

• an unknown number of items within the div that are displayed horizontally within the top and bottom borders of the parent div.

• Importantly, if more items are contained within the div that can fit horizontally, the div should continue with a new row of items below. This second row should also have the items displayed horizontally between the top and bottom borders of the parent div. I do not want the div to simply grow in height and start a new line because this will not allow the top and bottom borders to appear above and below each row of items.

解决方案

You can set the width of wrapper and put those blocks which are 100px high inside it.

Here is the example: http://jsfiddle.net/BVm5h/

Code:

<div class="wrapper">
 <div class="myClass">1</div>
 <div class="myClass">2</div>
 <div class="myClass">3</div>
 <div class="myClass">4</div>
 <div class="myClass">5</div>
 <div class="myClass">6</div>
 <div class="myClass">7</div>
 <div class="myClass">8</div>
 <div class="myClass">9</div>
 <div class="myClass">10</div>
</div>

CSS:

.wrapper {width: 600px;}

.myClass {
 border-top: 1px solid #FF0000;
 border-bottom: 1px solid #FF0000;
 width: 100px;
 height: 100px;
 float:left;
 margin-top: 5px;
}

div.myClass:last-child {
 width: 100%;
}​

JS:

var no = $('div.myClass').length;
var wlength = $('div.wrapper').width();
var length = $('div.myClass').width();
var tno = no*length;
while(wlength < tno)
 tno=tno-wlength;
var mw = wlength+length-tno;
$('div.myClass').last().css('max-width',mw);

​ ​ By changing the width of wrapper, you can set the number of div blocks you wish in each row.

Edit: Added JS if the last element is to be extended for entire row. ​

这篇关于得到固定的高度div继续下一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！