Я хочу добавить конец цитаты с текстом, как показано ниже. , но мой HTML-код выглядит следующим образом:
Итак, я хочу разместить конечную цитату в последней строке. Но в некотором разрешении это видно в следующей строке.
Мой HTML-код
<span style="leftquote">
<img alt="Quote" src="../../Images/Static/Quote_Start.png" class="startQuote" />
</span>
<span class="contentSection">
test text test text test text test text
<img alt="Quote" src="../../Images/Static/Quote_End.png" class="endQuote" />
</span>
и ниже - мой css ::
.leftquote { display: inline; }
.startQuote
{
vertical-align: baseline;
padding-right: 10px;
float:left;
}
.contentSection
{
display: block;
width: 89%;
padding-top: 8px;
}
.endQuote
{
vertical-align: text-top;
padding-left: 10px;
}
Итак, каков может быть обходной путь для этого?
Проверьте мой jsFiddle: http://jsfiddle.net/xGjD2/1/
<blockquote class="style3">
<span>test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
</span>
</blockquote>
и Css:
blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(http://www.8p-design.com/templates/base/images/white/quote_left.png);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(http://www.8p-design.com/templates/base/images/white/quote_left.png);
background-repeat: no-repeat;
background-position: bottom right;
}