Question

我正在尝试创建一个div网格（不使用表格！）。我不希望发生的是边界加倍，它应该都是1px。

我做了以下工作，当网格已满时效果很好：

这个基础是以下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表解决方案可能也不起作用。

Answer 1

不确定这是否会涵盖所有可能的情况，但您可能需要切换它并为外框指定一个上/左边框，并为每个单独的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“缺失”），那么你可以给外框也是一个右下边框，然后使用一些负边距。

Answer 2

尝试使用display table，table cell ....这样的事情： -

<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;
}

Answer 3

动态添加类是否适合您？

你可以这样做，比如在每一行的末尾添加一个最后一个类，然后在最后一行的每个项目中添加一个底层类。

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

然后会给你这样的东西 - http://jsfiddle.net/vrLhY/39/

div的网格与触摸边界 - 停止加倍

3 个答案: