页脚文本与Logo对齐求助：左侧多行文本+右侧Logo布局

修改HTML结构 #

先把左侧三行文本分组，方便布局控制：

<footer>
  <hr>
  <div class="footer-container">
    <div class="footer-text">
      <p>line1</p>
      <p>line2</p>
      <p>line3</p>
    </div>
    <img class="logo-footer" src="xxx" alt="页脚Logo">
  </div>
  <hr>
</footer>

添加CSS布局样式 #

用Flexbox实现左右对齐，同时保留文本换行特性：

/* 核心布局容器 */
.footer-container {
  display: flex;
  justify-content: space-between; /* 左右元素两端对齐 */
  align-items: flex-start; /* 顶部对齐，需要垂直居中可改为center */
  padding: 1rem 0; /* 添加上下间距，避免与水平线过于拥挤 */
}

/* 左侧文本行间距调整（可选） */
.footer-text p {
  margin: 0.5rem 0;
}

/* 右侧Logo尺寸控制 */
.logo-footer {
  width: 80px; /* 根据实际需求修改 */
  height: auto;
}

/* 水平线样式优化（可选） */
footer hr {
  border: none;
  border-top: 1px solid #ccc;
}

原理说明 #

原代码里<p>和<img>都是块级元素，默认会独占一行，导致Logo跑到文本下方。通过外层.footer-container设置display: flex，把内部元素转为弹性项，实现水平布局；justify-content: space-between让文本组和Logo分别靠向页脚左右两侧；左侧.footer-text容器保留了<p>的块级特性，所以三行文本会自动换行，不会挤到同一行。

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