0

在一个网页上，我有一个容器 div，里面有两个相邻的 div。在第一个内部 div 中，我试图设置一个 CSS 表，它有 4 列均匀地填充 div。

我遇到的问题是单元格的宽度似乎相对于页面的宽度，而不是表格/它的父 div。如果我将宽度从 25% 减小到更低的值，它会适合，但如果我缩放页面，它们仍然会换行，因为右侧的 div 会碰到最右边的表格单元格。

我应该如何设置布局以将它们保留在 div 中？

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css">
            html,body, div {
                display: block;
                height: 100%;
                width: 100%;    
            }

            #container {
                position: absolute;
                height: 300px;
                width: 100%;
            }
            .sideBySide {
                position: absolute;
                float: left;
                height: 100%;
            }

            #galleria {
                background-color:#0C0;
                left: 0px;
                right: 300px;
                width: auto;
            }

            #tagit {
                background-color: #099;
                right: 0px;
                width: 300px;
            }

            #table {
                position: absolute;
                margin: 0px;
                padding: 0px;
                display: table;
                height: 100%;
                width: 100%;
            }

            .table-row {
                position: relative;
                margin: 0px;
                padding: 0px;
                display: table-row;
                width: 100%;
                height: 25%;
            }

            .table-cell {
                position: relative;
                margin: 0px;
                padding: 0px;
                display: table-cell;
                float: left;
                height: 100%;
                width: 25%;

                padding: 20px;
            }

            .kuva {
                position: relative;
                margin: 0px;
                padding: 0px;
                width: 100%;
                height: 100%;

                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">Cell1</div>
                        </div>
                        <div class="table-cell">
                            <div class="kuva">Cell2</div>
                        </div>
                        <div class="table-cell">
                            <div class="kuva">Cell3</div>
                        </div>
                        <div class="table-cell">
                            <div class="kuva">Cell4</div>                       
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </body>
</html>
4

1 回答 1

1

消除

float: left;

从

.table-cell
于 2013-07-21T20:33:53.510 回答