如何使footer block与左侧图片处于同一Y轴底部水平线？

问题根源 #

当前布局依赖float实现左图右文，但存在几个关键问题：

• .news-content-wrapper设置了display: inline且固定height: 48px，导致内容容器无法自适应高度，底部区块被挤压
• 使用position: relative+bottom: -24px的方式无法精准对齐图片底部，因为浮动元素的父容器高度计算不包含超出部分

推荐方案：改用Flexbox布局（跨平台更稳定） #

Flexbox天生适合处理这种横向排列+对齐需求，无需依赖浮动和清除浮动，代码更简洁且兼容性好。

修改后的CSS：

.news-block-wrapper {
  /* 保留原有样式，无需额外修改 */
}

.news-title {
  font-size: 20px;
  line-height: 24px;
  color: #D4D4E1;
  text-transform: uppercase;
  margin: 0 0 10px 0; /* 调整间距，去掉固定width/top/left */
}

.news-img {
  width: 400px;
  height: auto;
  margin-right: 20px;
  flex-shrink: 0; /* 防止图片被压缩 */
}

.news-content-wrapper {
  flex: 1; /* 让内容容器占满剩余宽度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让标题、内容、底部区块垂直分布，底部区块自动靠下 */
}

.news-row {
  margin-bottom: 20px;
  border: 2px dotted yellow;
  display: flex; /* 核心：改为flex布局 */
  align-items: flex-start; /* 顶部对齐 */
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  margin-top: auto; /* 强制区块靠容器底部 */
}

.news-content {
  margin: 0 0 10px 0;
  padding: 2px;
  line-height: 1.6em;
  text-align: left;
  color: #B0B0BD;
  font-size: 14px;
}

/* 移除无用样式：.img-left-float、.clear */

修改后的HTML（仅需移除清除浮动的.clear元素）：

<div class="news-block-wrapper">
  <div class="news-row">
    <img src="https://loremflickr.com/860/640" class="news-img" alt="Test news Maxime assumenda natus neque.">
    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">16=>Test news Maxime assumenda natus neque.</a>
      </h5>
      <p class="news-content">Non qui vel quia excepturi. Dolorum ut voluptatem neque accusamus voluptatum.</p>
      <div class="footer-block">16=>Links</div>
    </div>
  </div>
  <div class="news-row">
    <img src="https://loremflickr.com/640/360" class="news-img" alt="Test news Magni vel et impedit hic.">
    <div class="news-content-wrapper">
      <h5 class="news-title">
        <a href="">2=>Test news Magni vel et impedit hic.</a>
      </h5>
      <p class="news-content">Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium. Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.Repellat vero qui dolorem error perspiciatis itaque magni labore. Veniam fuga saepe velit suscipit voluptatem. Corrupti omnis eum quas et nostrum labore. Doloribus adipisci velit eveniet consequatur at culpa quo. Delectus consequuntur commodi quo est delectus sed voluptatem qui. Incidunt voluptas sit laudantium adipisci officiis incidunt dolores. Tempore cupiditate est ab cum eos sapiente. Architecto eius debitis unde asperiores omnis veniam laudantium.</p>
      <div class="footer-block">2=>Links</div>
    </div>
  </div>
</div>

兼容旧方案：修复Float布局 #

如果必须保留浮动布局，需调整以下几点：

1. 移除.news-content-wrapper的display: inline和固定height
2. 给.news-row添加overflow: hidden（触发BFC，让容器包含浮动元素）
3. 将.footer-block设置为clear: both，并通过margin-top调整位置

修改后的CSS片段：

.news-content-wrapper {
  /* 移除display: inline和height: 48px */
  width: calc(100% - 420px); /* 400px图片宽度 + 20px margin */
  float: left;
}

.news-row {
  margin-bottom: 20px;
  border: 2px dotted yellow;
  overflow: hidden; /* 触发BFC */
}

.footer-block {
  border: 2px dotted red;
  height: 24px;
  clear: both;
  margin-top: auto; /* 或者根据实际内容调整margin-top值 */
}

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