使用表属性创建全宽度标头
使用表属性创建全宽度标头
提问于 2016-09-28 23:13:08
我在一个div中有多个跨空间，包装器显示为表，跨显示为表单元格。现在，我希望有一个标题出现在跨度之上，而不必再嵌套跨度。以下是我所拥有的：
.wrap {
width: 300px;
display: table;
}
.header {
display: table-header-group;
}
.first {
display: table-cell;
background: red;
padding: 10px;
}
.second {
display: table-cell;
background: green;
padding: 10px;
}
.third {
display: table-cell;
background: blue;
padding: 10px;
}<div class="wrap">
<span class="header">Header</span>
<span class="first">First</span>
<span class="second">Second</span>
<span class="third">Third</span>
</div>
https://jsfiddle.net/kn8b20p3/
如果您检查“标题”，它似乎填充了整个100%的宽度，但如果有更多的文本或背景颜色，它只会在第一列展开。
有没有一种方法可以让它覆盖所有三列，就像一个真正的标题，而不进一步嵌套？
回答 4
Stack Overflow用户
回答已采纳
发布于 2016-09-28 23:26:07
如果你真的想用表属性来代替span的，你可以代替
.header { display:表头-组；}
使用
.header { display:表标题；}
Stack Overflow用户
发布于 2016-09-28 23:29:17
如果您对另一种方法开放，这里有一种使用CSS柔性盒构建布局的方法。
.wrap {
width: 300px;
display: flex; /* 1 */
flex-wrap: wrap; /* 1 */
}
.header {
flex: 0 0 100%; /* 2 */
background-color: lightgray;
}
.first {
flex: 1 0 33.33%; /* 3 */
background: orangered;
}
.second {
flex: 1 0 33.33%; /* 3 */
background: lightgreen;
}
.third {
flex: 1 0 33.33%; /* 3 */
background: aqua;
}
.wrap > * {
padding: 10px;
box-sizing: border-box;
}<div class="wrap">
<span class="header">Header</span>
<span class="first">First</span>
<span class="second">Second</span>
<span class="third">Third</span>
</div>
备注：
- 建立启用包装的flex容器
- 标头消耗行中的所有空间，迫使兄弟姐妹创建新行。
- 大小可允许每行三项的项目
浏览器支持：
所有主要浏览器except IE < 10都支持Flexbox。
最近的一些浏览器版本，如Safari 8和IE10，需要供应商前缀。
要快速添加所需的所有前缀，请使用自动复位器。
关于这个答案的更多细节。
Stack Overflow用户
发布于 2016-09-28 23:29:31
https://jsfiddle.net/kn8b20p3/
.wrap{
width: 300px;
display: table;
}
.first{
display: table-cell;
background: red;
padding: 10px;
width:100px;
}
.header{
display:table-caption;
width:100%;
}
.second{
display: table-cell;
background: green;
padding: 10px;
}
.third{
display: table-cell;
background: blue;
padding: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39759013
复制相关文章
相似问题
腾讯云开发者
