在css的网格结构中应用边框

Question

我正在尝试创建一个具有相等高度和宽度的 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>

我有两个问题

1。 最后一行没有显示边框。

2。 尽管对所有人都应用了相同的边框属性，但边框宽度似乎不相等。

Answer 1

如果您想创建类似表格的东西，为什么不直接使用表格呢？

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

Answer 2

底部边框未显示在任一行中，因为.Cell 上有height: 100%，.Container 上有overflow: hidden。您在第一行下方看到的是第二行的上边框。

如果您在具有overflow: hidden 的height: 200px 元素的子元素上设置height: 100%;，然后为该子元素设置1px 的border，则该边框加起来边。

它使子元素垂直占据202px。那是 1px 从顶部边框 + 200px 从高度 + 1px 从底部边框。

但是父元素的高度只有200px和overflow: hidden，也就是说垂直方向，从子元素看，你看到的是1px上边框和@987654340 @孩子的身高。还有1px的高度和1px的底边框被隐藏了。

第二个垂直边框比第一个更粗，因为您同时拥有第一个单元格的右侧 1px 边框和第二个单元格的左侧 1px 边框。

这将解决问题http://dabblet.com/gist/3145644

Answer 3

.RowContainer 上的overflow:hidden 隐藏了.Cell div 上的边框，因为边框绘制在.Cell 的框之外，该框设置为100% 高度。删除overflow:hidden 应该会再次显示它。

至于不相等的边界，我不能肯定地说，因为你没有提供一个 jsfiddle 来查看，但我猜你的意思是单元格之间的边界比它应该的要厚 - 那是因为每个.Cell 都有一个边框，导致左右边框彼此相邻，呈现出2px 边框的外观。

您可以通过仅在每个.Cell 的顶部和左侧设置边框，然后在.Container 的底部和右侧设置边框来解决此问题。

Answer 4

删除你的溢出：隐藏

喜欢这个

   .Container {
width:1000px;

margin:0 auto;


}



   .RowContainer {

height:200px;
clear:both;

}


 .RowContainer .Cell {
position:relative;
float:left;
height:100%;
width:200px;

  border:1px solid Black;
}

CSS 溢出

页面上的每个元素都是一个矩形框。这些框的大小、位置和行为都可以通过 CSS 控制。通过行为，我的意思是当盒子内部和周围的内容发生变化时盒子如何处理它。例如，如果您不设置框的高度，则该框的高度将增长到容纳内容所需的大小。但是当你在一个盒子上设置了一个特定的高度或宽度，而里面的内容却放不下时会发生什么？这就是 CSS 溢出属性的用武之地，允许您指定您希望如何处理。

溢出属性有四个值：可见（默认）、隐藏、滚动和自动。还有姊妹属性overflow-y 和overflow-x，采用较少。