如何让副标题位于主标题下方且与logo同行？

核心思路：使用Flexbox布局（现代布局方式，比float更易维护，适合新手），将Logo和「主标题+副标题」的容器放在一个flex容器内，标题容器内部设置垂直排列，就能精准实现需求。

步骤1：HTML结构示例 #

<!-- 外层容器：包含Logo和标题组 -->
<div class="header-container">
  <img src="你的logo路径" alt="站点Logo" class="header-logo">
  <!-- 标题组容器：包裹主标题和副标题 -->
  <div class="title-group">
    <h1 class="main-title">你的主标题</h1>
    <p class="subtitle">你的副标题内容</p>
  </div>
</div>

步骤2：CSS样式实现 #

.header-container {
  display: flex; /* 开启flex布局，让Logo和标题组在同一行排列 */
  align-items: center; /* 垂直方向居中对齐，可根据视觉需求调整 */
  gap: 16px; /* Logo与标题组之间的间距，按需修改 */
}

.title-group {
  display: flex;
  flex-direction: column; /* 让主标题、副标题垂直排列 */
  align-items: flex-start; /* 让标题左对齐，默认是拉伸占满宽度 */
}

/* 可选：调整标题的默认样式，优化视觉效果 */
.main-title {
  margin: 0 0 6px 0; /* 主标题下方留小间距，区分副标题 */
  font-size: 26px;
}

.subtitle {
  margin: 0; /* 清除p标签默认的上下margin，避免多余空白 */
  font-size: 14px;
  color: #666;
}

为什么之前的方法没生效？ #

• 用float: left的问题：float属于旧布局方案，需要手动处理清除浮动，且块级元素（比如p标签）会自动换行，无法让副标题和主标题一起留在Logo的同行区域内。
• 切换p/span标签的问题：span是行内元素，无法直接实现上下排列；p是块级元素，默认占满一行，仅切换标签无法解决布局逻辑问题，必须配合容器的布局规则。

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