如何将响应式块引用元素与<p>文本块对齐



我一直很难让结束引号出现在我的报价文本的末尾。我附上它的样子和我想怎么做的照片。对准图片

如何使结束引号出现在文本末尾?

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 {
display: block;
content: "201D";
font-size: 80px;
position: inherit;
color: #7a7a7a;
margin: 0;
padding: 0;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:after {
content: "2019 2009";
}
blockquote cite:before {
content: "2014 2009";
}
<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. <br> <br>
</blockquote>
Tešíme sa na stretnutie, <br> Za kolektív SIRIUS <br> Ľ. Skladaný <br>
</p>
</div>
</div>

这符合您想要的吗?

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 {
display: block;
content: "201D";
font-size: 80px;
position: absolute;
bottom: -40px;
right: 0;
color: #7a7a7a;
margin: 0;
padding: 0;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:after {
content: "2019 2009";
}
blockquote cite:before {
content: "2014 2009";
}
<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;margin-bottom:0;">
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. <br> <br>
</blockquote>
Tešíme sa na stretnutie, <br> 
Za kolektív SIRIUS <br>
Ľ. Skladaný <br>
</p>
</div>
</div>

最新更新