html - 组织绝对定位表

Question

你好，我试图将一个表行放在另一个表行之上，我制作了一个部分作为包装器，并在该部分内制作了 2 个带有 div 的数字，我将其设置为相对的并且数字是绝对的，但当它设置为绝对表格时，让我感到困扰的是行变成一列，我不知道如何将它保持为一行，只是将底部的行放在顶部的行上

这就是我得到的，我尝试了很多不同的无用技巧，但我只是被难住了:O

section {
    display: table;
    display: block;
    width: 100%;
    border-spacing: 0.5em;
    vertical-align: middle;
    text-align: center;
}
figure {
    display: inline-block;
    display: table-row;
    max-width: 25%;
}
div.top {
    text-align: center;
    display: inline-block;
    background-color: grey;
    width: 200px;
    height: 200px;
    border: 10px solid rgba(0, 0, 0, 0.1);
}
div.bottom {
    text-align: center;
    display: inline-block;
    background-color: grey;
    width: 200px;
    height: 200px;
    border: 10px solid rgba(0, 0, 0, 0.1);
}

        <section style="position: relative;">
            <figure style="position: absolute;">
                <div class="top">H</div>
                <div class="top">G</div>
            </figure>
            <figure style="position: absolute;">
                <div class="bottom">A</div>
                <div class="bottom">B</div>
            </figure>
        </section>

Answer 1

它变成了一个列，因为它换行了。 当你给它绝对位置时，它的“最大宽度”样式是相对于“部分”的。

我不知道你想要实现什么，但请看这里。

当图形为 100% 时，它保持水平: https://jsfiddle.net/v0zq0en8/

width: 100%;

另一种解决方案是在图中添加“nowrap”: https://jsfiddle.net/0twvzbaq/

max-width: 25%;
white-space: nowrap;