得到固定高度div继续下一行

Question

一点都不确定这是可能的，但是在机会上，这就是我需要的：

• 100px高div，顶部和底部边框。

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

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

Answer 1

您可以设置包装器的宽度，并将那些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：

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

通过更改包装器的宽度，您可以设置每行中希望的div块数。

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

Answer 2

利用背景图像的力量。

http://jsfiddle.net/lollero/UTtVJ/1/

编辑：我注意到{7}中没有显示#bottom-line元素。似乎工作+ ie8。虽然可能很容易修复。由于这个解决方案不是那么受欢迎，我不会对此做任何事情......

CSS：

#wrap {
    background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat top left;
    float:left;
    margin-top: 20px;
    position: relative;
}

#inner-wrap {
    float: left;
    margin-bottom: -40px;
}

#wrap #top-line,
#wrap #bottom-line {
    position: absolute;
    margin: 0px;
    height: 2px;
    background: url('http://img209.imageshack.us/img209/5188/linedu.png') repeat-x 0px -116px;
    left: 0px;
    right: 0px;
}

#wrap #top-line { top: -8px; }
#wrap #bottom-line { bottom: -28px; }

#inner-wrap > div {
    margin-bottom: 20px;
    margin-left:10px;
    float: left;
    width: 100px;
    height: 100px;
    background: #111;
    border: 1px solid red;
    text-align: center;
    color: #888;
}


​

HTML：

<div id="wrap">
    <div id="top-line"></div>
    <div id="bottom-line"></div>
    <div id="inner-wrap">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
  </div>  
</div>​