如何在height:auto的父容器中底部对齐图片与按钮

这问题太常见了！要让图片和按钮始终固定在div底部，同时适配动态生成的内容（不用固定高度），Flexbox布局是最简洁可靠的方案。我帮你调整一下代码：

修改后的CSS代码 #

.box:nth-of-type(2n+1) { 
  margin-right: 10%; 
} 
.box { 
  width: 45%; 
  height: auto; 
  background-color: #ffffff; 
  box-shadow: 0 15px 14px -3px #d1daeb;
  /* 核心：把.box设为垂直方向的flex容器 */
  display: flex;
  flex-direction: column;
} 
.box a { 
  font-size: 16px; 
  font-weight: 600; 
  letter-spacing: -0.2px; 
  color: #602b96; 
  padding: 15px 50px; 
  text-decoration: none;
  /* 让按钮在自己的区域里靠左对齐（可选） */
  align-self: flex-start;
} 
.box a:hover { 
  color: #ffffff; 
} 
.box > div { 
  padding: 35px 40px 35px 40px; /* 增加底部padding，避免按钮贴边 */
  /* 核心：让这个内容区填充.box的剩余高度 */
  flex: 1;
  /* 内部也用flex布局，把按钮推到底部 */
  display: flex;
  flex-direction: column;
} 
.box img { 
  padding-top: 0; /* 去掉原有的padding-top，让图片紧贴内容区 */
  width: 100%;
}
.box p {
  /* 核心：让段落填充内容区的剩余空间，把按钮挤到底部 */
  flex-grow: 1;
  margin-bottom: 20px; /* 给按钮留点间距 */
}

修改后的HTML结构（和原结构一致，无需调整） #

<div class="box"> 
  <div> 
    <h2>Tittle of my div</h2> 
    <hr> 
    <span class="clearfix"></span> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <a class="buttonArticle" href="#">VIEW</a> 
  </div> 
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt=""> 
</div> 
<div class="box"> 
  <div> 
    <h2>Tittle of my div</h2> 
    <hr> 
    <span class="clearfix"></span> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <a class="buttonArticle" href="#">VIEW</a> 
  </div> 
  <img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt=""> 
</div>

原理说明 #

1. 外层.box设为flex容器：垂直排列子元素（内容区和图片），两个.box会自动对齐高度（由最高的那个决定）。
2. 内容区flex:1：让内容区填充.box里除了图片之外的所有空间，不管内容多少，都会撑满到图片上方。
3. 内容区内部用flex布局：给段落设置flex-grow:1，让段落占据内容区的剩余空间，把按钮推到内容区的底部。

这样不管CMS生成的内容长短，两个div的高度会自动统一，按钮和图片始终固定在各自的底部，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Ramon