Question

我的blockquote和引用代码看起来很适合短裤报价（参见阿尔伯特爱因斯坦的报价），但当我的报价太长时（参见比尔盖茨报价），最终报价不会移到最后块。

我如何设计它，所以无论我的报价多久，最终报价标记始终位于报价的末尾？

请参阅我的jsfiddle：http://jsfiddle.net/3PTtv/85/

<blockquote>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it. <cite>Albert Einstein</cite> 
</blockquote>
<br>
<blockquote>I actually thought that it would be a little confusing during the same period of your life to be in one meeting when you're trying to make money, and then go to another meeting where you're giving it away. I mean is it gonna erode your ability, you know, to make money? Are you gonna somehow get confused about what you're trying to do? <cite>Bill Gates</cite>
</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: #232323;
margin:0 auto;
display:block;
width:60%;
}

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

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

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

blockquote:after {
display: block;
content: "\201D";
font-size: 80px;
position: absolute;
right: 20px;
top: 40px;
color: #f66511;
}

Answer 1

尝试将top: 40px替换为bottom: -50px blockquote:after。这样结束报价与报价底部的距离相同，无论多长时间。

http://jsfiddle.net/3PTtv/86/

Answer 2

在top中从bottom更改为blockquote:after，它会更好地定位结尾报价。此外，可以调整行高，而不是使用-20px。

blockquote:after { bottom: -20px; display: block; content: "\201D"; font-size: 80px; position: absolute; right: 20px; color: #f66511; }

调整blockquote，使其适合短引号和长引号

2 个答案: