我正在尝试使用 css 表创建一个 4x4 的内容数组。单元格的大小应均匀。我解决了单元格离开父 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>