CSS表的行高度不均匀 [英] CSS table height of rows not even
问题描述
我试图使用css表创建一个4x4的内容数组。细胞应该尺寸均匀。我得到了解决离开父div的单元格。但是，这破坏了细胞的高度。
I am trying to create a 4x4 array of content using css tables. The cells should be evenly sized. I got a fix to a problem with the cells going out of the parent div. However that broke the height of the cells.
这里有什么问题？所有的行都应该是容器的25％，单元格继承。似乎发生的是第一行增长尽可能多，剩下的三个根据内容缩放...为什么？
What is wrong here? All the rows should be 25% of the container, with the cells inheriting that. What seems to happen is the first row grows as much as it can, and the 3 remaining ones scale according to the content... Why?
<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>
推荐答案
$ c> display table / table-row / table-cell 到不同的级别你可以得到这样的东西：
http://codepen.io/anon/pen/pvDwk
just keeping everything in the flow and dispatching display table/table-row/table-cell to different levels you can get to something like this :
http://codepen.io/anon/pen/pvDwk
为了摆脱滚动条，当表可以脚窗口不要忘记添加 body {margin：0;}
To get rid of scrollbar when table can feet window do not forget to add body{margin:0;}
这篇关于CSS表的行高度不均匀的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
