在一个网页上，我有一个容器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>
删除
float: left;
来自
.table-cell