Question

我正在开发一个ASP.Net网页，其中两个表位于页面中央，一个位于另一个之上。顶部的表包含由代码隐藏动态生成的输入字段，因此输入字段的数量会有所不同。底部的表包含恒定且不会更改的内容。页面的布局是固定的，必须保持不变。我的问题是，如何使底部表格动态垂直调整，以使其不与顶部表格中的字段重叠。页面的一般HTML布局如下所示：

<body style="vertical-align: middle; text-align: center;">
    <div id="container" style="position: relative; width: 910px; margin: 0px auto;">
    <form>
         <div style="width: 908px; text-align: center; margin: 75px auto; position: absolute; top: 0px; visibility: visible;">
             <table id="topTable"></table>
         </div>

         <table id="bottomTable" style="width: 908px; margin: 0px auto; position: absolute; top: 400px;"></table>
    </form>
    </div>
</body>

我想要达到的效果如下：

热门表格内容

第1场：......

第2场：......

第3场：......







等

底部表格内容

提交按钮

我想我可以将底部表格包装在div中，但我不确定具体的样式会达到预期的效果。我基本上想要水平保持固定位置，但要调整垂直对齐以防止与顶部重叠。

更新：

这是一个屏幕上限，显示两个表重叠。您看到的按钮位于底部表格中，字段应位于顶部，所有元素绝对位于浏览器屏幕的中心。

enter image description here

更新2：

我使用当前正在使用的样式更新了上面的HTML示例。

Answer 1

发生溢出的原因是因为您使用绝对定位。（position: absolute;）您经历的溢出是预期的，因为您的底部表也是绝对定位的。

如果您希望底部表位于顶部表格下方，请尝试以下操作：

<div style="position: absolute; top: 0px;">
    <table id="topTable">
    ...
    </table>
    <table id="bottomTable">
    ...
    </table>
</div>

这里我们将底部表放在包裹顶部表的div内，并删除了绝对定位。

Answer 2

当您列出序列中的两个div元素时，第二个div将随着第一个div元素的减小或增大而上下移动。（没有浮动=清除：CSS和绝对定位）

你只需要删除你的位置：你的元素的绝对css属性，并小心正确地将你的元素放在你的表中。记住不要为div或table元素指定高度。

如果将每个元素放在表格的右侧单元格中，则不会发生任何不良情况。所以，只要这样做，但要小心。

只需更改您的代码：

<body style="vertical-align: middle; text-align: center;">
<div id="container" style="position: absolute;top:0px; width: 910px; 
     margin: 0px auto;">
   <form>
      <div style="width: 908px; text-align: center; margin: 75px auto;">
          <table id="topTable"></table>
      </div>

      <div style="width: 908px; text-align: center; margin: 75px auto;">
          <table id="bottomTable" style="width: 908px; margin: 0px auto;"></table>
      </div>
   </form>
</div>

HTML元素重叠

2 个答案: