0

（テーブルを使用せずに）divのグリッドを作成しようとしています。私が起こりたくないのは、境界線を2倍にすることです。すべて1pxにする必要があります。

グリッドがいっぱいのときにうまく機能する次のことを行いました。

http://jsfiddle.net/vrLhY/

これの基礎は次のcssです：

.box {
    width: 33%;
    float: left;
    box-sizing: border-box;
    display:inline-block;           
    border-left:1px solid black;
    border-top:1px solid black;
}

.outer {
    width: 100%;
    height: auto;
    line-height: 0;
    border-right:1px solid black;
    border-bottom:1px solid black;
}

しかし、（上記の例のように）アイテムが欠落している場合、私が使用したソリューションで予想されるように、いくつかの境界線（div 6の下部、div 8の右側）が欠落しています。

誰かがこれを行うためのより良い方法を持っていますか？空白のdivを追加したくはありませんが、jQueryソリューションを受け入れます。

編集：幅は常に33％であるとは限りません-場合によっては25％または10％になることもあるため、ここでのcssテーブルソリューションもおそらく機能しません。

4

3 に答える 3

3

これがすべての可能な状況をカバーするかどうかはわかりませんが、切り替えて、外側のボックスに上/左の境界線を付け、個々のdivに下/右の境界線を付けることができます。

.box {
    width: 33%;
    float: left;
    box-sizing: border-box;
    display:inline-block;           
    border-right:1px solid black;
    border-bottom:1px solid black;
}

.outer {
    width: 100%;
    height: auto;
    line-height: 0;
    border-left:1px solid black;
    border-top:1px solid black;
}

.clearboth {
    clear: both;
}

参照： http： //jsfiddle.net/senff/vrLhY/41/

右下の境界線も必要な場合（DIVが「欠落」している場合）、外側のボックスにも右下の境界線を指定して、負のマージンを使用して作業できます。

于 2013-03-18T12:25:30.257 に答える
1

表示テーブル、テーブルセルを使用してみてください...次のようなもの：-

<div class="outer">
    <div class="boxrow">
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    </div>
    <div class="boxrow">
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    </div>
    <div class="boxrow">
    <div class="box">
         <h2>DIV</h2>

    </div>
    <div class="box">
         <h2>DIV</h2>

    </div>
    </div>

</div>

.box {
    display:table-cell;
    border:1px solid;
}
.outer {
    display: table;
    border:1px solid;
}
.clearboth {
    clear: both;
}
.boxrow{
    display:table-row;
}
于 2013-03-17T18:48:09.090 に答える
0

クラスを動的に追加することはあなたにとって実行可能なオプションですか？

各行の最後に最後のクラスを追加してから、最後の行の各項目に最下位のクラスを追加するようなものにすることができます。

.last {border-right:0;}
.bottom {border-bottom:0;}

次に、このようなものを提供します-http://jsfiddle.net/vrLhY/39/

于 2013-03-18T10:53:37.600 に答える