內容對齊的列保持最後一個div對齊底部？

Question

我有3列的內容，我設法通過給列固定的高度對齊最後一個div到底部。有沒有更好的方法，因爲如果有人改變內容，添加更多文本或更少的文本，這將不起作用。

.column { 
    width: 33%; 
    float: left; 
    background: #ccc; 
    height: 350px; 
    position: relative; 
} 
.btn { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    text-align: center; 
    padding: 10px; 
} 

我的小提琴：Fiddle

Answer 1

Flexbox的佈局是一個很好的解決方案。

body元素有行佈局（它包含3列），每列都有列布局（明顯）。並在內容欄內增長以填充剩餘的空間。

我從.btn類刪除了絕對定位，所以它會佔用coulmn中的空間。

body { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 

 
.column { 
 
    width: 33%; 
 
    float: left; 
 
    background: #ccc; 
 
    min-height: 350px; 
 
    position: relative; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.content { 
 
    flex-grow: 1; 
 
    padding: 0 5px; 
 
} 
 

 
.btn { 
 
    text-align: center; 
 
    padding: 10px; 
 
}

<div class="column"> 
 
    <div class="title"> 
 
    <h2>Title 1</h2> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
    </div> 
 
    <div class="btn">Click Me!</div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="title"> 
 
    <h2>Title 2</h2> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? Lorem ipsum 
 
    dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
    </div> 
 
    <div class="btn">Click Me!</div> 
 
</div> 
 

 
<div class="column"> 
 
    <div class="title"> 
 
    <h2>Title 3</h2> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
    </div> 
 
    <div class="btn">Click Me!</div> 
 
</div>

Answer 2

如果您需要與列固定的高度。

下面是代碼

.column { 
 
    width: 33%; 
 
    float: left; 
 
    background: #ccc; 
 
    height: 350px; 
 
    position: relative; 
 
} 
 
.btn { 
 
    text-align: center; 
 
    padding: 10px; 
 
    
 
} 
 
.content{background:#f5f5f5;height:240px;overflow-x:hidden;overflow-y:auto;}

<div class="column"> 
 
     <div class="title"> 
 
     <h2>Title 1</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 2</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 3</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div>

否則，如果你想最後一個div始終底部沒有固定的上述元素。

這裏是代碼 - >

.column { 
 
    width: 33%; 
 
    float: left; 
 
    background: #ccc; 
 
    height: auto; 
 
    position: relative; 
 
} 
 
.btn { 
 
    text-align: center; 
 
    padding: 10px; 
 
    
 
} 
 
.content{background:#f5f5f5;}

<div class="column"> 
 
     <div class="title"> 
 
     <h2>Title 1</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 2</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div> 
 
    
 
    <div class="column"> 
 
     <div class="title"> 
 
      <h2>Title 3</h2> 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iure repudiandae asperiores obcaecati accusantium, sapiente, tenetur dolores fugit omnis repellat dolorem iusto mollitia recusandae quidem perspiciatis dolore, ipsum suscipit ab? 
 
     </div> 
 
     <div class="btn">Click Me!</div> 
 
    </div>