柔性柱內部元素的均勻高度

Question

我有一個有幾列的表格。這些列可以包含不同大小的內容，因此高度會有所不同。

我想要做的是調整單個元素的高度，使它看起來這樣的形象：

。

.table { 
 
    display: flex; 
 
    background-color: #B2EBF2; 
 
    margin: 0 auto; 
 
    width: 900px; 
 
} 
 

 
.column { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 1 auto; 
 
    width: 33%; 
 
} 
 

 
.box { 
 
    flex: 1 0 auto; 
 
    padding: 1em; 
 
    box-sizing: border-box; 
 
    border: 1px solid #546E7A; 
 
} 
 

 
.title { 
 
    font-size: 2em; 
 
    text-align: center; 
 
} 
 

 
.description { 
 
    text-align: center; 
 
} 
 

 
img { 
 
    max-width: 100%; 
 
}

<div class="container"> 
 
     <div class="table"> 
 
      <div class="column"> 
 
       <div class="box title"> 
 
        Test 1 
 
       </div> 
 
       <div class="box description"> 
 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
 
       </div> 
 
       <div class="box image"> 
 
        <img src="http://unsplash.it/300/320" /> 
 
       </div> 
 
      </div> 
 
      <div class="column"> 
 
       <div class="box title"> 
 
        Test 2 
 
       </div> 
 
       <div class="box description"> 
 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo 
 
       </div> 
 
       <div class="box image"> 
 
        <img src="http://unsplash.it/300/300" /> 
 
       </div> 
 
      </div> 
 
      <div class="column"> 
 
       <div class="box title"> 
 
        Test 3 
 
       </div> 
 
       <div class="box description"> 
 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore 
 
       </div> 
 
       <div class="box image"> 
 
        <img src="http://unsplash.it/300/280" /> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 1

首先，你應該使用相同尺寸的圖像。然後刪除flex：1 0 auto;從.box，但給flex：1 0自動;僅限於.description。我希望它能滿足您的所有要求。