如何实现标题与副标题上下堆叠对齐？（仿Spotify专辑布局）

问题描述 #

我是一名入门级Web开发者，这是我遇到的首个技术难题，ChatGPT也未能帮我解决，目前尝试的所有方法都失败了。我想要实现的是让副标题「2004, 21 songs, 1 h 16 min」位于标题「The College Dropout」下方并对齐，以此打造类似Spotify的专辑搜索页面布局。

我尝试将flex display改为block，但没有效果；修改其他flex相关属性又担心会导致网站失去响应式特性，恳请协助解决。

解决方案 #

不需要改动外层image-container的flex布局，只需要给标题和副标题添加一个嵌套的垂直flex容器，就能实现两者上下对齐的效果，同时完全保留原有的响应式特性。

修改步骤

1. HTML结构调整：将标题和副标题包裹进一个新的容器text-container
2. CSS样式添加：给text-container设置垂直方向的flex布局，同时给副标题补充基础样式

修改后的完整代码

HTML代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The College Dropout</title>
  <link rel="stylesheet" href="./main.css">

</head>

<body>

  <div class="container">
    <div class="navbar-default">
      <nav>
        <ul>
          <li>
            <a href="../index.html">Home</a>
            <a href="">About Me</a>
            <a href="">Contact</a>
          </li>
        </ul>
      </nav>
    </div>

    <div class="image-container">
      <img class="image-style" src="../assets/images/college-dropout.jpg" alt="the-college-dropout">
      <!-- 新增的文本容器 -->
      <div class="text-container">
        <h1 class="title-style">The College Dropout</h1>
        <h2 class="subtitle-style">2004, 21 songs, 1 h 16 min</h2>
      </div>
    </div>
  </div>
  </div>

</body>

</html>

CSS代码

*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

@font-face {
  font-family: Hiragino;
  src: url(../assets/fonts/hiragino-kaku-gothic.otf);
}

:root {
  --step--2: clamp(0.56rem, calc(0.48rem + 0.41vw), 0.8rem);
  --step--1: clamp(0.68rem, calc(0.56rem + 0.56vw), 1rem);
  --step-0: clamp(0.81rem, calc(0.66rem + 0.76vw), 1.25rem);
  --step-1: clamp(0.98rem, calc(0.77rem + 1.02vw), 1.56rem);
  --step-2: clamp(1.17rem, calc(0.9rem + 1.36vw), 1.95rem);
  --step-3: clamp(1.4rem, calc(1.04rem + 1.8vw), 2.44rem);
  --step-4: clamp(1.69rem, calc(1.21rem + 2.38vw), 3.05rem);
  --step-5: clamp(2.02rem, calc(1.4rem + 3.12vw), 3.82rem);
}

html {
  background-color: white;
}

.container {
  background: rgb(65, 18, 24);
  background: linear-gradient( 0deg, rgba(65, 18, 24, 1) 0%, rgba(232, 152, 46, 1) 100%);
  padding-top: 2rem;
  padding-bottom: 5rem;
}

ul {
  display: flex;
  justify-content: right;
  list-style: none;
  padding-bottom: 1rem;
}

li {
  margin: 0 10px;
}

a {
  color: grey;
  text-decoration: none;
  padding: 10px;
  font-family: Hiragino;
  font-size: 0.7rem;
}

a:hover {
  color: white;
}

/* Responsive styles */
@media (max-width: 768px) {
  ul {
    flex-wrap: wrap;
  }
  li {
    width: 100%;
    text-align: center;
  }
}

.image-container {
  display: flex;
  margin-left: 2rem;
  align-items: center;
  /* 小屏幕下自动换行，保持响应式 */
  flex-wrap: wrap;
  gap: 1rem;
}

.image-style {
  width: clamp(200px, 50%, 400px);
}

.text-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image-container .title-style {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(1rem, 5vw + 1rem, 6rem);
  color: white;
  font-family: Hiragino;
}

.subtitle-style {
  color: rgba(255,255,255,0.8);
  font-size: var(--step-0);
  font-family: Hiragino;
  font-weight: normal;
}

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