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

Question

完全不确定这是可能的，但很有可能，这就是我需要的：

• 具有顶部和底部边框的 100 像素高 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);

​ ​ 通过改变wrapper的宽度，你可以设置每行你希望的div块的数量。

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

Answer 2

利用背景图像的力量。

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

编辑：我注意到该#bottom-line元素没有出现在 ie7 中。似乎工作+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>​