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

我试图创建div的网格（不使用表格！）。我不想发生的是任何边界的加倍，它应该都是1px。div与触摸边框的网格 - 停止加倍

我已经做了伟大的工程下面当电网已满：

这样做的依据是下面的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表格解决方案可能也不会起作用。

来源

2013-03-17 user319940

我会用'

'。有没有[那]（http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html）邪恶 – 2013-03-17 20:25:00

我不能这样做，因为列的数量将动态 - 内框的宽度有时（例如4列）或甚至10％（10列）可能为25％。 – user319940 2013-03-17 20:44:17

回答

不知道这是否会覆盖所有可能的情况，但你可能要绕切换，并给了外包装盒的顶部/左边框和各个人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/

如果您还需要在右下角边框（wher é有一个DIV“失踪”），那么你可以给外框还有一个右下边框，然后使用一些负边距。

来源

2013-03-18 12:25:30

尝试使用显示表，表单元格....事情是这样的： -

<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-17 18:48:09 PSL

对不起，我可能应该添加 - 百分比可能会从33更改为25等，所以这可能不是一个可行的解决方案 - 我会添加到OP。 – user319940 2013-03-17 20:18:21

是动态添加类为你一个可行的选择？

您可以像最后一行添加最后一个类到最后一行的每个行的底部类。

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

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

来源

2013-03-18 10:53:37 micp

我正在考虑这样的解决方案，但据我所知，并不知道哪一个div是一排的结尾。 – user319940 2013-03-18 11:29:18

难道你不能做到以下几点 - 有一个变量，它允许你设置每一行的列数。另一个计算列的总数，另一个根据这两个值进行小小的划分以计算它们总共有多少行？然后，您可以使用这些值来根据计数来分配最后一个和最后一个类？ – micp 2013-03-18 11:38:08

这绝对是一种选择 - 对于这样的事情可能有点过重，但我最终可能会使用类似的东西。 – user319940 2013-03-18 11:56:07

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

回答

相关问题