如何用HTML/CSS实现标题副标题并排及日期、作者定位？

嘿，我来帮你搞定这份报告的排版需求！要实现标题副标题并排、日期右上角、作者右下角的效果，咱们可以用Flexbox和绝对定位来调整，修改后的代码如下：

修改后的CSS代码 #

html { 
  min-height: 100%; 
  background: whitesmoke; 
  margin: 0; /* 去掉默认边距避免布局偏移 */
}
.front-page {
  position: relative; /* 作为绝对定位元素的参考容器 */
  min-height: 100vh; /* 让页面容器占满整个视口高度 */
}
div#header.title-page { 
  margin-left: 150px; 
  margin-top: 220px;
  display: flex; /* 启用Flexbox实现标题副标题并排 */
  align-items: center; /* 让标题和副标题垂直居中对齐 */
  gap: 20px; /* 控制标题和副标题之间的间距 */
}
h1.title { 
  font-size: 50pt;
  margin: 0; /* 去掉默认margin避免额外间距 */
}
h1.subtitle {
  font-size: 24pt; /* 可根据需求调整副标题字号 */
  flex: 1; /* 让副标题自动占据剩余空间，超出时自动换行 */
  margin: 0; /* 去掉默认margin */
}
h2.date {
  position: absolute;
  top: 20px;
  right: 20px;
  margin: 0;
}
h2.author {
  position: absolute;
  bottom: 20px;
  right: 20px;
  margin: 0;
}

修改后的HTML代码 #

<div class="front-page">
  <div id="header" class="title-page">
    <h1 class="title">Quarterly Report</h1>
    <h1 class="subtitle">Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text Huge text</h1>
  </div>
  <h2 class="author">Me</h2>
  <h2 class="date">2019-10-18</h2>
</div>

关键调整说明 #

• 给.front-page设置position: relative，确保日期和作者的绝对定位是相对于整个页面容器，而不是浏览器窗口
• 将#header.title-page改为Flex布局，轻松实现标题与副标题的并排效果，align-items: center保证两者垂直居中对齐，gap控制间距更灵活
• 副标题添加flex:1属性，让它自动占据剩余空间并在内容过长时自动换行，避免和标题挤在一起
• 用position: absolute分别将日期固定在右上角、作者固定在右下角，调整top/bottom和right的值可以灵活改变它们的位置
• 去掉所有元素的默认margin，避免浏览器自带样式干扰自定义布局

这样调整后，就能完美实现你想要的排版效果啦！

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