6

これが可能かどうかはまったくわかりませんが、偶然に、私が必要としているものは次のとおりです。

  • 上と下の境界線を持つ100pxの高さのdiv。

  • 親divの上下の境界線内に水平に表示されるdiv内の不明な数のアイテム。

  • 重要なのは、水平方向に収まるより多くのアイテムがdiv内に含まれている場合、divは下のアイテムの新しい行を続行する必要があるということです。この2番目の行には、親divの上下の境界線の間にアイテムが水平に表示されている必要があります。divの高さが単純に大きくなり、新しい行が開始されることは望ましくありません。これにより、アイテムの各行の上下に上下の境界線が表示されなくなります。

ここに画像の説明を入力してください

4

2 に答える 2

4

ラッパーの幅を設定し、その中に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を追加しました。</ p>

于 2012-04-23T10:12:03.150 に答える
1

背景画像の力を活用します。

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>​
于 2012-04-23T12:39:54.403 に答える