CSS 布局/流程

Question

我需要将两个表格堆叠在一起，前后都有内容。我无法让后面的内容正常流动。堆叠的 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 — 它总是在图表顶部结束。

Answer 1

我认为您遇到的问题是两个表都是position: absolute;。这是一个问题，因为它会将它们都带出文档流，这意味着它们的高度不会注册为包含父项的高度的一部分。

但是，您不能将它们都放回文档流中，因为那样您将无法获得底层效果。我建议做这样的事情:

#chart, #underlay { width: 1185px; }
#underlay { position: absolute; top: 0px; left: 0px; }

假设它们具有相同的维度，保留其中一个表，让另一个绝对定位。这将保留父容器的尺寸，并允许将两个表放置在同一位置。

Have a look at the result here->