css中网格结构中边界的应用
我正在尝试创建一个具有相同高度和宽度的div的网格结构，但无法应用边框CSS。
.Container {
width:1000px;
position:relative;
margin:0 auto;
}
.RowContainer {
overflow:hidden;
position:relative;
height:200px;
clear:both;
}
.RowContainer .Cell {
position:relative;
float:left;
height:100%;
width:200px;
border:1px solid Black;
}HTML
<div class="Container">
<div class="RowContainer">
<div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p> </div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
<div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
</p> </div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
</div>
<div class="RowContainer">
<div class="Cell"><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum
</p></div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
<div class="Cell"><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></div>
</div>
<div style="clear:both"></div>
</div>我有两个问题
- 边框未显示在最后一行。
- 此外，尽管对所有人都应用了相同的边框属性，但边框宽度似乎是不平等的。
回答 4
Stack Overflow用户
发布于 2012-07-19 17:32:45
底部边框在中也没有显示，因为行中有height: 100%在.Cell上，overflow: hidden在.Container上。在第一行下面看到的是第二行的顶部边框。
如果在具有height: 100%;的height: 200px元素的子元素上设置overflow: hidden，然后将border of 1px设置为该子元素，则该边框将在所有方面加起来。
它使子元素垂直地占据202px。这是来自顶部边框的1px，+ 200px，来自高度+ 1px，来自底部边框。
但是父元素的高度仅为( 200px和overflow: hidden )，这意味着从子元素的垂直方向上，您看到的是子元素高度的1px顶部边框和199px。还有1px的高度和1px的底部边框是隐藏的。
第二个垂直边框比第一个垂直边框更厚，因为第一个单元格的右1px边框和第二个单元格的左1px边框都有。
这将解决http://dabblet.com/gist/3145644的问题
Stack Overflow用户
发布于 2012-07-19 17:32:36
如果您想要创建类似于表的东西，为什么不直接使用表呢？
<table class="container">
<tr>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
</tr>
<tr>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum lorum ipsum</h1><p>lorum ipsum epsum</p></td>
<td><h1>lorum ipsum</h1><p>lorum ipsum epsum</p></td>
</tr>
</table>Stack Overflow用户
发布于 2012-07-19 17:35:24
overflow:hidden on .RowContainer隐藏了.Cell div上的边框，因为边框是在.Cell的框外绘制的，该框设置为100%的高度。删除overflow:hidden应该会再次显示它。
至于不平等的边框，我不能肯定地说，因为你没有提供一个可以查看的细节，但我猜你的意思是，单元格之间的边框比它应该的更厚--因为每个.Cell都有一个边框，所以左/右边框相邻，显示出一个2px边框。
您可以通过只在每个.Cell的顶部和左侧设置边框，然后在.Container的底部和右侧设置边框来解决这个问题。
https://stackoverflow.com/questions/11566156
复制相似问题
腾讯云开发者
