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