我正在尝试使用 CSS 表格创建一个 4x4 的内容数组。单元格的大小应均匀。我修复了 cells going out of the parent div 的问题.然而，这打破了细胞的高度。
这里有什么问题？所有行都应该是容器的 25%，单元格继承它。似乎发生的是第一行尽可能多地增长，剩下的 3 行根据内容缩放...为什么？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html,body {
display: block;
height: 100%;
width: 100%;
}
div {
display: block;
}
#container {
background-color: #CCF;
position: absolute;
height: 100%;
width: 100%;
}
.sideBySide {
position: absolute;
float: left;
top: 0px;
height: 100%;
}
#galleria {
background-color:#0C0;
left: 0px;
right: 300px;
width: auto;
}
#tagit {
background-color: #099;
right: 0px;
width: 300px;
}
#table {
position: absolute;
display: table;
height: 100%;
width: 100%;
}
.table-row {
position: relative;
display: table-row;
width: 100%;
height: 25%;
}
.table-cell {
position: relative;
display: table-cell;
height: 100%;
width: 20%;
padding: 20px;
}
.kuva {
position: relative;
width: 100%;
height: 100%;
margin: 10px;
background-color: #999;
}
</style>
</head>
<body>
<div id="container">
<div id="galleria" class="sideBySide">
<div id="table">
<div class="table-row">
<div class="table-cell">
<div class="kuva">
Kuva1
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva2
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva3
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva4
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
Kuva1
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva2
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva3
</div>
</div>
<div class="table-cell">
<div class="kuva">
Kuva4
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
text
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
</div>
<div class="table-row">
<div class="table-cell">
<div class="kuva">
test
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
<div class="table-cell">
<div class="kuva">
</div>
</div>
</div>
</div>
</div>
<div id="tagit" class="sideBySide">.</div>
</div>
</body>
</html>
最佳答案
只要让一切都在流程中并将 display table/table-row/table-cell 分派(dispatch)到不同的级别，你可以得到这样的东西:
http://codepen.io/anon/pen/pvDwk
要在表格可以支撑窗口时摆脱滚动条，请不要忘记添加 body{margin:0;}
关于行的CSS表格高度不均匀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17777281/