Как иметь изображение вверху слева и внизу справа

Question

Может кто-нибудь сказать мне, что я здесь делаю не так? То, что я имею, - изображения цитаты. Я хочу обернуть текст между этими цитатами. Открытая цитата в порядке и отображается правильно. Изображение вверху слева, а текст обтекает его и под ним. Однако заключительная цитата не будет отображаться правильно. Он идет ниже тега абзаца.

Спасибо

      <div id="box1">
        <div class="info">adfda</div>
        <div class="post">
          <img style="float:left" src="quotes-open.jpg" alt="" />
          <p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
          <img style="float:right" src="quotes-close.jpg" alt="" />
        </div>
      </div>

.post p {
  line-height: 1.2em;
  margin: 0 0 20px 0;

}

Любой ??

Answer 1

Прежде всего, если это цитата, используйте элемент <blockquote>. Если вам абсолютно необходимы две цитаты, вы можете сделать одну цитату фоновым изображением блочной цитаты, а другую - фоновое изображение вложенного элемента <p>. При правильном заполнении все должно работать нормально.

Answer 2

<blockquote>
    <q>This is the quote</q>
    <q>This is another quote</q>
    <q>Etc...</q>
</blockquote>

blockquote {
    padding-bottom: 10px; 
    background: transparent url(end-quote.gif) no-repeat 100% 100%;
}

blockquote q:first-child {
    display: block;
    padding-top: 10px;
    background: transparent url(start-quote.gif) no-repeat 0 0;        
}

Вы также можете сделать это противоположным образом, используя <blockquote> в качестве открывающей котировки и q:last-child в качестве закрывающей котировки.

Answer 3

Вы можете переместить изображение закрывающей кавычки в место, где-то внутри вашего <p> (однако вам придется поиграть с его позиционированием; безопасная ставка находится на расстоянии 10-15 слов от конца последнего предложение) Итак, из вашего примера вы бы получили:

<div id="box1">
    <div class="info">adfda</div>
    <div class="post">
        <img style="float:left" src="quotes-open.jpg" alt="" />
        <p>lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj 
           asg hagl lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
           <img style="float:right" src="quotes-close.jpg" alt="" />
           lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl
        </p>
    </div>
</div>

Я думаю, вам повезет больше с чем-то вроде того, что предложил Стивен:

HTML:

<div>
  <div class="info">adfda</div>
  <div class="post">
    <blockquote>
      <p class="closeq">lskg;alsjglkajg jlg; ;lkj g;lk aglkj;lgkjlkjg alkjs glkjhaslkj hjkas hglkj asg hagl</p>
    </blockquote>  
  </div>
</div>

CSS

.post blockquote { background: url(quotes-open.jpg) no-repeat top left; /*padding*/ }
.post blockquote p.closeq { background: url(quotes-close.jpg) no-repeat bottom right; /*padding*/ }

Примечания

.post blockquote: получает начальную цитату, заданную в качестве фона и позиции сверху и слева. Вы захотите добавить к элементу некоторые отступы, чтобы не переполнять текст и не переполнять его.

.post blockquote p.closeq: Я пошел дальше и попал туда, где вы должны явно указать, где вы хотите заключительные кавычки. Это потому, что вы можете хотеть цитату с более чем одним абзацем. Снова здесь вы захотите поиграть с отступом, чтобы убедиться, что ваш текст не выходит за заключительную цитату.

Answer 4

Простое решение:

<!-- HTML: -->
<blockquote><div>
Your text
</div>
</blockquote>

/* CSS: */
blockquote {
  background: url('link-to-open-quote.gif') left top;
}

blockquote div {
  background: url('link-to-closing-quote.gif') right bottom;
  padding-bottom: 40px; /* To prevent the text from flowing over the quote */
}

Answer 5

<blockquote>
     <p>This is the quote</p>
     <p class="last-child">This is the last paragraph</p>
</blockquote>

blockquote { 
   background:url(./quote-open.gif) no-repeat top left; 
   padding:10px 0 10px 30px;
}

blockquote p {
   padding:0 30px 0 0;
}

blockquote p:last-child, blockquote p.last-child { 
   background:url(./quote-close.gif) no-repeat bottom right;
}`

Поиграйте с отступом, чтобы он выглядел так, как вы хотите.

Есть много способов сделать это ... искать в Google и исследовать. Вот ссылка с кучей примеров, используйте Firebug, чтобы проверить понравившиеся и посмотреть, как они это сделали: http://www.smileycat.com/design_elements/pull_quotes/

Answer 6

Это ниже, потому что тег p является элементом уровня блока.

Попробуйте переместить оба изображения над абзацем или установите для тега <P> значение float и установите для него фиксированную ширину.