0

我正在尝试创建一个 div 网格（不使用表格！）。我不希望发生任何加倍的边界，它应该都是 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 回答