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 に答える