行的CSS表格高度不均匀答案

【问题标题】：CSS table height of rows not even行的CSS表格高度不均匀
【发布时间】：2013-07-21 21:48:45
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

position:absolute 或 fixed 击杀显示，float 也是如此。您将不兼容的方法混合在一起。如果这些数据应该放在表格中，您应该使用表格并将所有内容保持在流中（位置：静态或相对；）
@GCyrillus 你能告诉我或给我一个关于如何进行布局的例子吗？表格可以用来填满屏幕然后均匀划分吗？无论如何，我听说表格不利于布局......
只需将所有内容保持在流程中并将显示 table/table-row/table-cell 分派到不同的级别，您就可以得到这样的结果：codepen.io/anon/pen/pvDwk (+ body{margin:0;} )
@GCyrillus 这正是我所追求的。我没有考虑更多地使用桌子，等等。因为这个css（主要是“位置：......”），我一直在敲我的头。也许有一天我会学会。你介意把它变成一个答案，这样我就可以接受了:)
很高兴它帮助了你，我会回答它

标签： css layout position css-tables

【解决方案1】：

只要保持一切顺利并将display table/table-row/table-cell 发送到不同的级别，您就可以得到这样的结果： http://codepen.io/anon/pen/pvDwk

要在table可以脚窗口时去掉滚动条不要忘记添加body{margin:0;}

【讨论】：