Question

我有一张桌子如下。表格后面的div内容与表格重叠，而不是在新行

上

<table border="0" style="width:680px;position:relative !important;">
    <tr>
        <td class="row1" style="background:red">1</td>
        <td class="row2" style="background:green">2</td>
    </tr>
</table>
<div style="position:relative !important;">22</div>

这是css

   .row1 {
        width:405px;
        position:absolute;
    }
    .row2 {
        width:273px;
        position:absolute;
        left:390px;
    }

有人可以帮我解决一下吗？ div内容应位于表格内容下方的新行上。提前致谢

Answer 1

这是因为你的桌子没有高度。高度崩溃是因为您已经绝对定位了表格单元格。简单的解决方法是添加一个高度（如果一直都知道），但这根本不是很强大。

如果您发布了您想要做的事情（主要是您绝对定位的原因），我们可以帮助您进一步提供帮助：）

Answer 2

您的两个<td>是position: absolute，不会让<table>保持打开状态。你需要

将height分配给您的table
删除absolute

td

或向margin-top添加足够的div，使其位于您的桌子下方。

鉴于上述信息，第二种选择可能就是你想要的。

Answer 3

这是因为你在CSS中设置position：absolute：这意味着正常流程被中断并且该元素重叠。如果你删除它，你就不会遇到问题：

小提琴http://jsfiddle.net/BHLhS/1/

Answer 4

*更新：真的不知道你想要达到的目标，但这是一种实现目标的方法。

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style type="text/css">
            /* Wrapper container for the table and thd div below it. */
            .abs-div {
                position: absolute;
            }
            /* First td inside the table. */
            .row1 {
                float: left;
                margin-right: -15px;
                width: 405px
            }
            /* Second td within the table, but it's on the same row as the first td, but called row-2 for some reason. */
            .row2 {
                float: left;
                width: 273px
            }
            /* Div below table. */
            .div-below-table {
                position: relative !important;
            }
        </style>

    </head>
    <body>
        <div class="abs-div">
            <table border="0" style="width:680px;position:relative !important;">
                <tr>
                    <td class="row1" style="background:red">1</td>
                    <!-- Should this be on it's own row -->
                    <td class="row2" style="background:green">2</td>
                </tr>
            </table>
            <div class="div-below-table">22</div>
        </div>
    </body>
</html>

Answer 5

我发现在我的项目中使用的最简单的方法是使用样式在底部添加填充，以便用户看不到重叠的偶数

.padding_for_footer250 {
    padding-bottom: 250px;  
}

Div内容与表内容重叠

5 个答案: