html - 将 end Quote 与末尾的文本对齐

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;
  }