CSS布局/流程

Question

我需要将两个表格堆叠在一起，其中包含前后的内容。我不能让之后的内容正常流动。堆叠的桌子是可变高度的。

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->

Answer 2

尝试将浮点数添加到div中，对于额外的信息，请添加clear: both；

祝好运。

Answer 3

因为您的#ChartPanel的内容是空的(您的表是绝对的，所以从#ChartPanel中选择。你的#ChartPanel里已经没有剩下的高度了。尝试向#ChartPanel添加高度。

#ChartPanel { 
    width: 100%; 
    height:500px; /* <-- very new */
    position: relative; }
#chart, #underlay { 
    width: 1185px; 
    position: absolute; 
    top: 0; left: 0; }
#extraInfo { 
     /* maybe even just... nothing, or some relative positioning. */
}