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

Question

我的 blockquote 和 cite code 看起来和适用于 shorts quotes(参见 Albert Einstein quote)，但是当我的引用太长时(参见 Bill Gates quote)，结束引用不会移动到最后 block 。

如何设计它的样式，以便无论我的引用有多长，结束引号始终位于引用的末尾？

查看我的 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 for blockquote:after。这样，无论引文有多长，结尾引文与引文底部的距离都相同。

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