同じ高さの列に子アイテムを作成する

Question

同じ高さではない列にいくつかの要素があります（divのテキストは必ずしも同じではありません）。すべての.top要素はそれぞれ同じ高さにする必要がありますその他のすべての.bottom要素はすべての.bottom要素と同じ高さである必要があります。私はこのCNAがjavascriptで行われることを知っているが、私はこれを使いたくない。 CSSでこれを行うことはできますか？

<div class="row"> 
    <div class="col"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    </div> 
    <div class="col"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    </div> 
    <div class="col"> 
    <div class="top"></div> 
    <div class="bottom"></div> 
    </div> 
</div> 

Answer 1

はい、CSSで行うことができます。これはそれを行う1つの方法です。

.row { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.col { 
 
    display: table-cell; 
 
    padding: 15px; 
 
    width: 33%; 
 
}

<div class="row"> 
 
    <div class="col" style="background: blue;"> 
 
    <div class="top"> 
 
     <p>Lorem ipsum Lorem ipsum</p> 
 
     <p> Lorem ipsum Lorem ipsum Lorem ipsum</p> 
 
    </div> 
 
    <div class="bottom">Lorem ipsum</div> 
 
    </div> 
 
    <div class="col" style="background: yellow;"> 
 
    <div class="top">Lorem ipsum</div> 
 
    <div class="bottom">Lorem ipsum</div> 
 
    </div> 
 
    <div class="col" style="background: red;"> 
 
    <div class="top">Lorem ipsum</div> 
 
    <div class="bottom">Lorem ipsum</div> 
 
    </div> 
 
</div>

等しい幅COLSを追加しました。