小编Geo*_*ani的帖子

我有这个代码

HTML:
<div id="table">
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
    <div class="table-cell"></div>
</div>

CSS:
#table {
    display: table;
    width: 940px;
    table-layout: fixed;
}
.table-cell {
    display: table-cell;
    overflow: hidden;
    width: 220px;
    height: 282px;
    padding: 9px 10px;
}

是否可以在每添加 4 个后让浏览器包装表格单元格。我的意思是每 4 个表格单元格创建一个新行。

谢谢！

PS 一行中只有 4 个单元格位置。

我有一个在 Chrome 中运行良好的代码：

#menu ul {
list-style-position: inside;
list-style-type: none;
display: block;
margin: 0 auto;
padding: 0;
}
#menu li {
font-size: 11px;
width: 95px;
display: inline-block;
vertical-align: top;
position: relative;
}
#menu li a {
color: black;
text-decoration: none;
}
#menu li a img {
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
position: absolute;
top: 0;
left: 22px;
margin: 0 auto;
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
}
#menu li …

在JSFiddle 示例中，您可以看到 2 个表行。我需要自动设置第一个的高度。第二个的高度需要设置到页面底部。但是浏览器将表格行高设置为 50%...

.table {
    display: table;
    table-layout: auto;
}
html,body {
    height: 100%;
    min-height: 100% !important;
}

.row {
    display: table-row;
    border: 1px solid black;
}