我需要将两个表格堆叠在一起,前后都有内容。我无法让后面的内容正常流动。堆叠的 table 高度可变。
HTML 结构:
... other content ...
<div id="ChartPanel">
<table id="chart">
<table id="underlay">
</div>
<div id="ExtraInfoPanel">
<table id="extraInfo">
</div>
CSS:
#ChartPanel { width: 100%; position: relative; }
#chart, #underlay { width: 1185px; position: absolute; top: 0; left: 0; }
#extraInfo { ??? }
表格堆叠得很好,但我还没有想出让 extraInfo
在图表之后流动的 CSS — 它总是在图表顶部结束。
最佳答案
我认为您遇到的问题是两个表都是position: absolute;
。这是一个问题,因为它会将它们都带出文档流,这意味着它们的高度不会注册为包含父项的高度的一部分。
但是,您不能将它们都放回文档流中,因为那样您将无法获得底层效果。我建议做这样的事情:
#chart, #underlay { width: 1185px; }
#underlay { position: absolute; top: 0px; left: 0px; }
假设它们具有相同的维度,保留其中一个表,让另一个绝对定位。这将保留父容器的尺寸,并允许将两个表放置在同一位置。
关于CSS 布局/流程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5544348/