Выровнять конец цитаты с текстом в конце

0

Я хочу добавить конец цитаты с текстом, как показано ниже. Изображение 174551, но мой HTML-код выглядит следующим образом: Изображение 174551

Итак, я хочу разместить конечную цитату в последней строке. Но в некотором разрешении это видно в следующей строке.

Мой 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;
}

Итак, каков может быть обходной путь для этого?

Теги:
alignment
double-quotes

1 ответ

0

Проверьте мой 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;
  } 
  • 0
    Привет, я проверил вашу JS скрипку. Я проверил это, добавив «test1 test2 t» к вашему контенту, в результате он покажет ту же проблему (цитата в следующей строке). (К вашему сведению: мое разрешение 1366 х 768)
  • 0
    Теперь это работает, даже если это не совсем тот же результат: jsfiddle.net/xGjD2/3 . С вашим кодом изображение ведет себя как символ, и это нормально, если он переходит на следующую строку.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню