2014-02-28 22 views
0

我的報價和引用代碼看起來很適合短期報價(參見阿爾伯特愛因斯坦報價),但是當我的報價太長時(見比爾蓋茨報價),結束報價不會移動到塊的最後。調整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; 
} 

回答

2

嘗試用bottom: -50px更換top: 40pxblockquote:after。這樣,結尾報價與報價底部的距離相同,不管時間多長。

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

0

top更改爲bottomblockquote:after,它將使結束報價更好。線高也可以調整,而不是使用-20px

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