顯示相同級別/高度的列的內容

Question

我有一個div設置爲display:flex的列。所有列都居中。欄目內容全部爲vertical-align: middle;

當內容全部高度相同時（見代碼段），它效果很好。但是，當一列比另一列高時，我希望較短的列與下圖中最高的列處於同一水平/高度，而最高的列在中間保持垂直：

Is這可能使用CSS或JavaScript？

.cont { height:400px; width: 100% } 
 
.button-bottom {display: flex; 
 
align-items: center; 
 
justify-content: center; height:50%;background: yellow;} 
 

 
.column {width: 20%; 
 
display: table-cell; 
 
text-align: center; 
 
vertical-align: middle; 
 
float: none;}

<div class="cont"> 
 
    <div class="button-bottom"> 
 
    <div class="column"> 
 
     <h5>Ambience Blah BLha mana na hhsjs</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
    <h5>Ambience</h5> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

我這樣做了點。這是你的修復。

.cont { height:400px; width: 100% } 
 
.button-bottom {display: flex; 
 
justify-content: center; height:50%;background: yellow;} 
 
.column {width: 20%; 
 
display: table-cell; 
 
float: none;}

<div class="cont"> 
 
    <div class="button-bottom"> 
 
    <div class="column"> 
 
     <h5>Ambience Blah BLha mana na hhsjs</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
     <h5>Ambience</h5> 
 
    </div> 
 
    <div class="column"> 
 
    <h5>Ambience</h5> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 2

https://jsfiddle.net/ex3ntia/r67y6hhu/3/

我加2個CSS行如果你想點，你可以刪除

/* demo */ 
h5 {position:relative;} 
.column h5:before {display:block;background-color:red;content:'';width:100%;height:2px;top:15px;position:absolute;}