一番上の行の下端をラッパーなしで絶対配置できますか？

Question

背景イメージといくつかのブロックを持つコンテナを持っているので、私は以下のレイアウトを達成しようとしています。つまり、最初の行の下端が固定されたyの値になるようにブロックを行に表示します。同じ行のすべての列は、その内容にかかわらず同じ高さを持つ必要があります。これは、ラッピング要素に一緒にブロックAとBを置くことによって達成することが些細なことだろうが、それだけで、これらの要素を、なしで行うことができる場合、私は興味：これまでのところ

<div id="container"> 
 
    <div id="A"> 
 
    <p>A1</p> 
 
    </div> 
 
    <div id="B"> 
 
    <p>B1</p> 
 
    <p>B2</p> 
 
    </div> 
 
    <div id="C"> 
 
    <p>C1</p> 
 
    </div> 
 
    <div id="D"> 
 
    <p>D1</p> 
 
    <p>D2</p> 
 
    </div> 
 
    <div id="E"> 
 
    <p>E1</p> 
 
    </div> 
 
</div>

私はtransform: translateY(-100%)をAとBに適用しようとしましたが、それらのブロックと次のブロックとの間には隙間があります。何とかA、BとCの幅を同じにしてしまうと、AとBのように動くかもしれませんが、フレックスボックスと戦っています。

解決策はフレックスボックスベースである必要はありませんが、私はあまりにもハッキリではないことを望みます。以下は

Answer 1

それのためのCSSグリッド・ソリューションです。 あなたの要件に応じて、行と列でちょっと遊ばなければならないかもしれません。

* { 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t font-family: sans-serif; 
 
\t \t \t font-size: 20px; 
 
\t \t \t font-weight: bolder; 
 
\t \t \t color: #484848; 
 
\t \t } 
 
\t \t body { 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t } 
 

 
\t \t div { 
 
\t \t \t min-height: 100px; 
 
\t \t \t background-color: rgba(0,0,0,0.1); 
 
\t \t } 
 

 
\t \t p { 
 
\t \t \t margin: 0; 
 
\t \t \t text-align: center; 
 
\t \t } 
 

 
\t \t #A { 
 
\t \t \t grid-area: areaA; 
 
\t \t \t background-color: cadetblue; 
 
\t \t } 
 
\t \t #B { 
 
\t \t \t grid-area: areaB; 
 
\t \t \t background-color: darksalmon; 
 
\t \t } 
 
\t \t #C { 
 
\t \t \t grid-area: areaC; 
 
\t \t \t background-color: beige; 
 
\t \t } 
 
\t \t #D { 
 
\t \t \t grid-area: areaD; 
 
\t \t \t background-color: bisque; 
 
\t \t } 
 
\t \t #E { 
 
\t \t \t grid-area: areaE; 
 
\t \t \t background-color: darkseagreen; 
 
\t \t } 
 

 
\t \t /* Adjust the padding in acordance with the height of 'A' and 'y' */ 
 
\t \t #container { 
 
\t \t \t display: grid; 
 
\t \t \t grid-template-columns: 25% 25% 25% 25%; 
 
\t \t \t grid-template-rows: auto; 
 
\t \t \t grid-template-areas: 
 
\t \t \t "areaA areaB . ." 
 
\t \t \t "areaC areaC areaC areaC" 
 
\t \t \t "areaD areaD areaE areaE"; 
 
\t \t \t grid-column-gap: 16px; 
 
\t \t \t grid-row-gap: 16px; 
 
\t \t \t padding-top: 100px; 
 
\t \t } 
 

 
\t \t p { 
 
\t \t \t width: 100%; 
 
\t  position: relative; 
 
\t  top: 50%; 
 
\t  transform: translate3d(0,-50%,0); 
 
\t \t }

<div id="container"> 
 
    <div id="A"> 
 
    <p>A</p> 
 
    </div> 
 
    <div id="B"> 
 
    <p>B</p> 
 
    </div> 
 
    <div id="C"> 
 
    <p>C</p> 
 
    </div> 
 
    <div id="D"> 
 
    <p>D</p> 
 
    </div> 
 
    <div id="E"> 
 
    <p>E</p> 
 
    </div> 
 
</div>