Html 一个并行div中的CSS表_Html_Css_Layout_Position_Css Tables

Html 一个并行div中的CSS表

html css layout

Html 一个并行div中的CSS表,html,css,layout,position,css-tables,Html,Css,Layout,Position,Css Tables,在一个网页上，我有一个container div，其中两个div相邻。在第一个内部div中，我试图设置一个CSS表，该表有4列，均匀地填充该div 我遇到的问题是，单元格的宽度似乎是相对于页面的宽度，而不是相对于表/它的父div。如果我将宽度从25%减小到更低的值，它将适合，但是如果我缩放页面，它们仍然会换行，因为右侧的div会碰到最右侧的表单元格我应该如何设置布局以将它们保留在div中 <html xmlns="http://www.w3.org/1999/xhtml">

在一个网页上，我有一个container 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>


html，body，div{
显示：块；
身高：100%；
宽度：100%；
}
#容器{
位置：绝对位置；
高度：300px；
宽度：100%；
}
.肩并肩{
位置：绝对位置；
浮动：左；
身高：100%；
}
#画廊{
背景色：#0C0；
左：0px；
右：300px；
宽度：自动；
}
#塔吉特{
背景色：#099；
右：0px；
宽度：300px；
}
#桌子{
位置：绝对位置；
边际：0px；
填充：0px；
显示：表格；
身高：100%；
宽度：100%；
}
.表格行{
位置：相对位置；
边际：0px；
填充：0px；
显示：表格行；
宽度：100%；
身高：25%；
}
.表格单元格{
位置：相对位置；
边际：0px；
填充：0px；
显示：表格单元格；
浮动：左；
身高：100%；
宽度：25%；
填充：20px；
}
库瓦先生{
位置：相对位置；
边际：0px；
填充：0px；
宽度：100%；
身高：100%；
背景色：#999；
}
第1单元
细胞2
第三单元
第四单元

删除

float: left;

从

这解决了问题，但是它打破了我的专栏高度（在一个更大的页面中，没有粘贴到这个问题）。你能回答这个后续问题吗？请给我完整的HTML/CSS。我创建了另一个问题，我想我已经链接到我的评论了。看来我没有。。。不管怎样，我已经得到了答案

.table-cell