html - 组织绝对定位表

你好，我试图将一个表行放在另一个表行上，我做了一个节作为包装器，并在该节内添加了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>

最佳答案

因为它包装，所以它成为一列。
当您给它绝对位置时，它的“最大宽度”样式相对于“节”。

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

当图形具有100％时，它将保持水平：
https://jsfiddle.net/v0zq0en8/

width: 100%;

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

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

关于html - 组织绝对定位表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42026892/