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

它变成了一个列，因为它包装了。当你给它绝对位置时，它的“max-width”风格是相对于“section”。

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

当数字为100％时，它保持水平： https://jsfiddle.net/v0zq0en8/

width: 100%;

另一种解决方案是添加“nowrap”来表示： https://jsfiddle.net/0twvzbaq/

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

Answer 2

在删除位置集时，两个Div都按预期排列。 this jsfiddle demo不是你想要他们做的吗？

<section>
  <figure>
    <div class="top">H</div>
    <div class="top">G</div>
  </figure>
  <figure>
    <div class="bottom">A</div>
    <div class="bottom">B</div>
  </figure>
</section>

组织绝对定位的表

2 个答案: