在一个网页上，我有一个容器 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
关于html - 一个平行 div 中的 CSS 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17776554/