親divの一番下で、隣り合って位置divがあります。

Question

親divの下に、それぞれの高さの異なるdivをどのように配置できますか？

私はコードで行いますが、ボトムに合わせるようです。

div要素は、上の赤色は、現在アクティブなタブとそれがアイテムをフレックスボックスを使用して位置合わせを達成することができる

.pane{ 
 
      position: relative; 
 
      display: block; 
 
      width: 500px; 
 
      height: 120px; 
 
      background-color: lightgrey; 
 
     } 
 
     .sec{ 
 
      position: absolute; 
 
      bottom: 0px; 
 
      display: inline-block; 
 
      width: 35%; 
 
      height: 80%; 
 
      background-color: red; 
 
      border-right: dashed; 
 

 
     } 
 
     .thir{ 
 
      float: left; 
 
      width: 15%; 
 
      height: 70%; 
 
      display: inline-block; 
 
      background-color: grey; 
 
      border-right: dashed; 
 
     }

<div class="pane"> 
 
      <div class="sec"></div> 
 
      <div class="thir"></div> 
 
      <div class="thir"></div> 
 
      <div class="thir"></div> 
 
    </div>

Answer 1

灰色もの非アクティブなタブであるタブを表しますフレックスエンドに接続します。

.pane{ 
 
     display: flex; 
 
     flex-direction: row; 
 
     justify-content: flex-start; 
 
     align-items: flex-end; 
 

 
      width: 500px; 
 
      height: 120px; 
 
      background-color: lightgrey; 
 
     } 
 
     .sec{ 
 
      display: inline-block; 
 
      width: 35%; 
 
      height: 80%; 
 
      background-color: red; 
 
      border-right: dashed; 
 

 
     } 
 
     .thir{ 
 
      float: left; 
 
      width: 15%; 
 
      height: 70%; 
 
      display: inline-block; 
 
      background-color: grey; 
 
      border-right: dashed; 
 
     }

<div class="pane"> 
 
      <div class="sec"></div> 
 
      <div class="thir"></div> 
 
      <div class="thir"></div> 
 
      <div class="thir"></div> 
 
    </div>