絶対配置されたテーブルを整理する

Question

こんにちは私は別のものに1つのテーブルの行を入れようとしていましたが、セクションをラッパーとして作成し、セクション内にdivを2つ入れました。絶対にテーブルの行が列になると私はどのように行として保持し、一番上に一番下の行を置くかわからない

これは私が別の無駄なトリックと私だけの多くを試して得たものです困惑：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

、両方の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>