Question

所以我目前有以下HTML / CSS：

<style type="text/css">
    body {
        background: #eeeeee;
    }

    .table {
        display: table;
        margin: 0px auto;
        max-width: 400px;
        position: relative;
    }

    .row {
        display: table-row;
        max-width: 400px;
    } 

    .td1,
    .td2 {
        display: table-cell;
        border: 2px #aaaaaa solid;
        padding: 15px;
        background: #ffffff;
        font-size: 18px;
        color: #333333;
    }

    .td2 {
        border-top: none;
        color: #777777;
        position: absolute;
        max-width: 400px;
        right: 0px;
        left: 0px;
    }

    .under_div {
        position: relative;
    }
</style>

<body>

<div class="table">
    <div class="row">
        <div class="td1">Some random text that changes and can change the height of this div/td</div>
    </div>
    <div class="row">
        <div class="td2">Some random text that changes and can change the height of this div/td</div>
    </div>
    <div class="row">
        <div class="under_div">
            <p>Some random text that remains the same always
        </div>
    </div>
</div>
</body>

我的问题是第二个td（td2）需要position: absolute。这是有原因的，所以它不能只是一个普通的div，因为这会使这更容易：）

因此，您可以看到under_div中的下一个占用与td2 div相同的空格。我想要的是td2 div下的那个。原则上我可以尝试将其定位以使其恰好位于下方。但正如div文本中所述，文本会发生变化，因此td1和td2 div的高度将是随机的。

那么有没有一种方法可以将under_div div放在td2 div下面，当然它跟随着其他两个div所具有的大小，而不仅仅是在一个位置？

我试过在第一个之后再创建另一个table-div。但这似乎也没有做任何事......

Answer 1

我认为你需要重新考虑一下你的设计，因为我不认为用绝对定位的元素来做这件事。您可以使用float和clear完成我认为您想要的内容。一个例子jsfiddle是here。

在一个绝对div下堆叠div？

1 个答案: