我决定我不知道我在用我的 CSS 做什么。
我想要并排显示两个 div。左边的 div 有内容并且应该足够大以支持它。右边的 div 应该占据剩余的水平空间，并且与左边的 div 高度相同。
第三个 div 应该位于两个 div 下方并横跨整个页面。
我尝试使用表格，但右侧的单元格无法扩展到可用的完整高度/宽度。我一直在尝试将显示设置为表格、表格行、表格单元格的 div。
由于某种原因，左边的 div 一直在水平扩展，而我的右边的 div 没有任何空间。我尝试指定左侧 div 的宽度，但它被忽略了。
右侧的 div 具有由 javascript 创建的动态内容，因此在渲染发生时它是空的。
#main {
display : table;
width : 100%;
}
.row {
display : table-row;
width : 100%;
}
#row2 {
display : table-row;
background-color:purple;
}
#right {
display : table-cell;
overflow: hidden;
height: 100%;
background-color:blue;
}
#left {
display : table-cell;
background-color:red;
width: 100px;
}
<body>
<div id="main">
<div class="row">
<div id="left">
Some content
</div>
<div id="right"></div>
</div>
<div id="row2">
Some stuff
</div>
</div>
</body>
最佳答案
您的“右”列没有占用任何空间，因为它没有内容。给它一些东西，它就会。
<div id="main">
<div class="row">
<div id="left">
Some content
</div>
<div id="right"> </div>
</div>
<div id="row2">
Some stuff
</div>
</div>
另外，使用表格显示属性并不意味着您需要表格、表格行和表格单元格元素。 Table 和 table-cell 足以满足这种情况:
.row {
display : table;
width : 100%;
}
#row2 {
background-color:purple;
}
#right {
display : table-cell;
overflow: hidden;
height: 100%;
background-color:blue;
}
#left {
display : table-cell;
background-color:red;
width: 100px;
}
关于html - 显示 : table 的 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19123810/