組織絕對定位表

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>