0

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

1 回答 1

1

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

要在表格可以英尺窗口时摆脱滚动条，请不要忘记添加 body{margin:0;}

于 2013-07-21T23:16:38.937 回答