带有触摸式边框的div网格--不要重复使用
带有触摸式边框的div网格--不要重复使用
提问于 2013-03-18 02:38:59
我正在尝试创建一个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表格解决方案可能也不起作用。
Stack Overflow用户
发布于 2013-03-18 02:48:09
尝试使用显示表格、表格单元...就像这样：
<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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15464646
复制相关文章
相似问题
腾讯云开发者
