0

我正在尝试创建一个具有相等高度和宽度的 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. 尽管对所有人都应用了相同的边框属性，但边框宽度似乎不相等。

4

4 回答 4

3

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

<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>
于 2012-07-19T17:32:36.630 回答
1

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

如果您在that hasheight: 100%;的一个元素的子元素上设置，然后为该子元素设置 a of ，则该边框在所有边上加起来。height: 200pxoverflow: hiddenborder1px

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

但是父元素的高度只有 200pxand overflow: hidden，这意味着从子元素垂直方向上，您看到的是1px上边框和子元素199px的高度。1px它的高度和1px底部边框仍然是隐藏的。

第二个垂直边框比第一个更厚，因为你有第一个单元格的右边框和第二个单元格1px的左1px边框。

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

于 2012-07-19T17:32:45.967 回答
0

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

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

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

于 2012-07-19T17:35:24.427 回答
0

删除你的溢出：隐藏

像这样

   .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，它们的采用率较低。

于 2012-07-19T17:53:37.910 回答