如何使边界崩溃(在div上)？
如何使边界崩溃(在div上)？
提问于 2018-05-18 06:44:51
假设我有如下标记：http : //jsfiddle.net/R8eCr/1/
<div class="container">
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="column">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
...
</div>
然后CSS
.container {
display: table;
border-collapse: collapse;
}
.column {
float: left;
overflow: hidden;
width: 120px;
}
.cell {
display: table-cell;
border: 1px solid red;
width: 120px;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
为什么他们还没有崩溃，我有外面的div display: table; border-collapse: collapse;和cell display: table-cell？我在这里错过了什么？
回答 2
Stack Overflow用户
发布于 2018-05-18 15:32:15
这里有一个演示
首先，你需要更正语法错误
display: table-cell;diaplay: table-cell;
.container {
display: table;
border-collapse:collapse
}
.column {
display:table-row;
}
.cell {
display: table-cell;
border: 1px solid red;
width: 120px;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Stack Overflow用户
发布于 2018-05-18 15:59:48
使用简单的负边距而不是使用显示表格。
.container {
border-style: solid;
border-color: red;
border-width: 1px 0 0 1px;
display: inline-block;
}
.column {
float: left; overflow: hidden;
}
.cell {
border: 1px solid red; width: 120px; height: 20px;
margin:-1px 0 0 -1px;
}
.clearfix {
clear:both;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100001350
复制相关文章
相似问题
腾讯云开发者
