如何实现blockquote与<p>文本块响应式对齐并让右引号居文本末尾

问题根源 #

当前右引号使用display: block和position: inherit，导致它单独占据一行无法贴合文本末尾；同时HTML标签嵌套存在错误（<p>闭合标签在<blockquote>外），也会干扰正常排版。

修正步骤 #

1. 修复HTML结构

确保标签嵌套规范，将签名内容放入<cite>标签并置于<blockquote>内：

<div class="w3-quarter w3-container">
  <img src="Images/pfp.png" alt="PFP" style="width:100%; height:100%; object-fit: contain;">
</div>
<div class="w3-threequarter w3-container">
  <blockquote style="width:auto;">
    <p style="text-align:justify;">
      Vážení spoluobčania, <br> 
      Vitajte na stránke SIRIUS. <br> 
      Kolektív SIRIUS sa podujal vytvoriť ju po prvých podujatiach 22. 8. 2022 a 24.8.2022. všetky vaše otázky a podnety – stanete sa spolutvorcami nového SIRIUSu.
    </p>
    <cite>
      Tešíme sa na stretnutie, <br> 
      Za kolektív SIRIUS <br> 
      Ľ. Skladaný
    </cite>
  </blockquote>
</div>

2. 调整CSS样式

修改blockquote:after的定位逻辑，使其绝对定位在<blockquote>右下角，贴合文本末尾：

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  width: 500px;
  margin: 0.25em 0;
  padding: 0.25em 40px;
  line-height: 1.45;
  position: relative;
  color: #616161;
}

blockquote:before {
  display: block;
  content: "\201C";
  font-size: 80px;
  position: absolute;
  left: -20px;
  top: -20px;
  color: #7a7a7a;
}

/* 修正右引号样式 */
blockquote:after {
  content: "\201D";
  font-size: 80px;
  position: absolute;
  right: 20px; /* 匹配blockquote右内边距调整位置 */
  bottom: -15px; /* 垂直对齐到文本最后一行 */
  color: #7a7a7a;
}

blockquote cite {
  color: #999999;
  font-size: 14px;
  display: block;
  margin-top: 5px;
}

blockquote cite:after {
  content: "\2019 \2009";
}

blockquote cite:before {
  content: "\2014 \2009";
}

关键说明 #

• 移除blockquote:after的display: block和position: inherit，利用<blockquote>的position: relative属性绑定绝对定位。
• 通过right和bottom参数微调右引号位置，确保精准贴合文本末尾。
• 修正HTML标签嵌套错误，避免浏览器渲染异常。

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