Question

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

Answer 1

只需将所有内容保留在流程中并将display table/table-row/table-cell分派到不同的级别，就可以得到如下内容： http://codepen.io/anon/pen/pvDwk

当桌子可以在脚窗口时不要忘记添加body{margin:0;}

来摆脱滚动条

CSS表的行高不均匀

1 个答案: