在CSS

我试图创建具有相同的高度和宽度的DIV网格struture但我无法申请边境 CSS在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. 除了边框的宽度似乎尽管应用相同的边框属性为所有的不平等。

来源

2012-07-19 user1537788

这是你的溢出与你的高度混乱。 – Chad 2012-07-19 17:33:37

底部边框不要么行显示，因为你有对.Container的.Cell和overflow: hiddenheight: 100%。你在第一行看到的是第二行的顶部边框。

如果您对height: 200px有overflow: hidden元素的子集height: 100%;然后设置的1px给孩子border，那么边境四面八方加起来。

它叫子元素占用202px垂直。这是从顶部边界+200px从高度+1px从底部边框。

但父元素具有的只有200px和overflow: hidden的高度，这意味着垂直，从子元素，你看到了什么是1px边框与孩子的身高199px。还有它的高度，这是隐藏在1px底边框的1px。

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

这样就解决了问题http://dabblet.com/gist/3145644

来源

2012-07-19 17:32:45 Ana

是的，你是对的，这是因为溢出：hidden.Can你解释为什么它显示这种行为 – user1537788 2012-07-19 17:40:47

非常好的解释http://jsfiddle.net/nmqGD/请检查这个小提琴我试图使边界甚至 – user1537788 2012-07-19 17:53:34

我认为这个http://jsfiddle.net/nmqGD/1/解决了它。 – Ana 2012-07-19 17:56:10

如果你想创造的东西，是表像，为什么不使用表？

<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-19 17:32:36 Wex

是的，表格用于表格数据，divs用于布局目的。 – 2012-07-19 17:35:05

thks for code，but my boss doent want table ....我只想用div。可以帮助我解决这个问题 – user1537788 2012-07-19 17:37:33

好吧，还有其他两个答案可以帮助你解决问题。你应该重新考虑并使用表格 - 表格是为了显示表格数据而建立的。与使用非表格标记相比，使用它们可以获得更多的控制权。 – Wex 2012-07-19 17:40:53

的overflow:hidden上.RowContainer是隐藏在.Cell div的边界，因为边界的绘制.Cell的盒子，它被设置为100％的高度之外。卸下overflow:hidden应该再次显示它。至于不等边界，我不能肯定地说，因为你没有提供一个jsfiddle来看，但我猜你的意思是细胞之间的边界比它应该更厚 - 这就是因为每个.Cell具有边框一路走去，导致左/右边缘坐在旁边的交相辉映，给人2px的边框的外观。

只需在每个.Cell的顶部和左侧设置边框，然后在.Container的底部和右侧设置边框，即可解决此问题。

来源

2012-07-19 17:35:24

是删除溢出隐藏是heling看到边界，但在顶部应用边框并在每个细胞的左侧，然后在底部和右侧设置边界。容器不能正常工作 – user1537788 2012-07-19 17:47:40

http://jsfiddle.net/nmqGD/检查此小提琴 – user1537788 2012-07-19 17:51:22

删除您溢出：隐藏

这样

.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-19 17:53:37 Samitha

回答

相关问题