最后将结束报价与文本对齐

Question

我想将结束引用内嵌到结尾文本中，如下所示。 但我的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;
}

那么解决方法可能是什么呢？

Answer 1

检查我的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;
  }