在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顶部边界和199px。其高度的CCD_ 18和CCD_。

第二个垂直边界比第一个厚，因为第一个单元格的右侧1px边界和第二个单元格的左侧1px边界都有。

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

Answer 3

.RowContainer上的overflow:hidden隐藏了.Celldiv上的边框，因为边框是在.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，它们的采用范围较小。