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

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

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

它使子元素垂直占据1px。这是202px来自顶部边框 + 1px的高度 + 200px来自底部边框。

但是父元素的高度只有 1px和200px，这意味着从子元素垂直地看到的是{{1} }孩子身高的上边框和overflow: hidden。 高度仍为1px，隐藏了199px底部边框。

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

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

Answer 3

overflow:hidden上的.RowContainer隐藏了.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，它们的使用不太广泛。

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

4 个答案: