内容对齐的列保持最后一个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>