css中网格结构中边界的应用
css中网格结构中边界的应用
提问于 2012-07-19 17:26:43
我正在尝试创建一个具有相同高度和宽度的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>我有两个问题
- 边框未显示在最后一行。
- 此外，尽管对所有人都应用了相同的边框属性，但边框宽度似乎是不平等的。
Stack Overflow用户
发布于 2012-07-19 17:53:37
删除溢出:隐藏
像这样
.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溢出属性出现的地方，允许您指定希望如何处理该属性。
溢出属性有四个值:可见(默认)、隐藏、滚动和自动。也有姐妹属性溢出-y和溢出-x，它们得到了较少的广泛采用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11566156
复制相关文章
相似问题
腾讯云开发者
