html - 获取固定高度的 div 以在下一行继续

Question

完全不确定这是否可能，但在偶然的情况下，这是我需要的:

• 100 像素高的 div，带有上下边框。

• div 中未知数量的元素水平显示在父 div 的顶部和底部边框内。

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

Answer 1

你可以设置 wrapper 的宽度，并把那些 100px 高的 block 放在里面。

示例如下: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:

.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);

的通过更改 wrapper 的宽度，您可以设置每行中所需的 div block 数。

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