组织绝对定位表

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;

Answer 2

在删除职位集时，两个Divs都按预期排列。 这个jsfiddle演示不是您想要他们做的吗？

<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>