使用Flexbox实现底部对齐同时保留浮动布局的问题

嘿，我看你一直在纠结日期和来源的底部对齐问题，试了好几种方案都没搞定对吧？别着急，咱们用Flexbox结合浮动就能完美实现你要的效果，既保留文本环绕图片的特性，又能让来源和日期始终钉在容器底部。

实现方案 #

核心思路是给外层容器设置Flex垂直布局，让文本区域占据容器的剩余空间，这样底部的来源日期就会被自动推到容器最底部，同时给图片设置左浮动来实现文本环绕效果。

完整代码示例

<div class="news-item">
  <div class="content-wrap">
    <img src="https://via.placeholder.com/150" alt="示例图片" class="float-img">
    <h2>Heading 1</h2>
    <p>这里是文本内容，文本较多时会自动换行到图片下方，文本较少时也不会影响底部的来源和日期位置。这里是文本内容，文本较多时会自动换行到图片下方，文本较少时也不会影响底部的来源和日期位置。这里是文本内容，文本较多时会自动换行到图片下方，文本较少时也不会影响底部的来源和日期位置。</p>
  </div>
  <div class="meta-info">
    <span class="source">来源：示例媒体</span>
    <span class="date">2024-05-20</span>
  </div>
</div>

<!-- 文本较少的情况 -->
<div class="news-item">
  <div class="content-wrap">
    <img src="https://via.placeholder.com/150" alt="示例图片" class="float-img">
    <h2>Heading 2</h2>
    <p>短文本示例</p>
  </div>
  <div class="meta-info">
    <span class="source">来源：示例媒体</span>
    <span class="date">2024-05-20</span>
  </div>
</div>

.news-item {
  display: flex;
  flex-direction: column;
  min-height: 220px; /* 可根据需求调整，去掉则容器自适应内容高度 */
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.content-wrap {
  flex: 1; /* 让内容区域占据容器剩余空间，把meta-info挤到底部 */
}

.float-img {
  float: left;
  width: 150px;
  height: 150px;
  margin-right: 15px;
  margin-bottom: 10px;
}

.meta-info {
  margin-top: 10px;
  color: #666;
  font-size: 14px;
}

效果说明 #

• 当文本内容较多时，文本会自动绕到图片下方，而来源和日期依然固定在整个容器的底部；
• 当文本内容较少时，来源和日期会紧贴在容器底部，不会跟着文本跑到图片旁边的中间位置；
• 浮动图片的排版特性完全保留，同时Flex布局解决了底部元素的对齐问题，完美匹配你要的两种场景。

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