Как выровнять текст рядом с изображением?

0

У меня есть изображения, идущие слева направо, и я хочу иметь текст рядом с каждым изображением, и я дал ему что-то вроде этого:

    <div>
<p style="float: left;"><img src="images/pic1.jpg" height="141px" width="212px" border="0px"></p>
<p>Etiam ac pellentesque lorem. Aliquam vel quam scelerisque, interdum eros id, ultricies est. Etiam in tristique urna. In a mi sit amet enim faucibus rhoncus. Etiam viverra nisl sed velit commodo rutrum. Nunc malesuada nulla sed nibh aliquet, nec fringilla lacus lacinia. Phasellus sed tristique odio.</p>
</div>

<div>
<p style="float: right;"><img src="images/pic2.jpg" height="141px" width="212px" border="0px"></p>
<p>Etiam ac pellentesque lorem. Aliquam vel quam scelerisque, interdum eros id, ultricies est. Etiam in tristique urna. In a mi sit amet enim faucibus rhoncus. Etiam viverra nisl sed velit commodo rutrum. Nunc malesuada nulla sed nibh aliquet, nec fringilla lacus lacinia. Phasellus sed tristique odio.</p>
</div>

<div>
<p style="float: left;"><img src="images/pic3.jpg" height="141px" width="212px" border="0px"></p>
<p>Etiam ac pellentesque lorem. Aliquam vel quam scelerisque, interdum eros id, ultricies est. Etiam in tristique urna. In a mi sit amet enim faucibus rhoncus. Etiam viverra nisl sed velit commodo rutrum. Nunc malesuada nulla sed nibh aliquet, nec fringilla lacus lacinia. Phasellus sed tristique odio.</p>
</div>

Вот пример того, как я хочу, чтобы он реплицировался: http://foundation.zurb.com/page-templates4/banded.html

Одна из проблем, которые я замечаю, заключается в том, что высота текста кажется слегка отброшенной на несколько пикселей и как я могу получить ее на высоте 141 пиксель?

  • 0
    Параграфы имеют встроенные поля / отступы, поэтому вы можете посмотреть, решает ли их обнуление вашу проблему. Если бы вы могли предоставить JS Fiddle, вам было бы легче помочь. Я также не уверен, почему вы помещаете изображение в тег p
  • 0
    Это то, что вы после jsfiddle.net/j08691/EmxCA ?
Показать ещё 2 комментария
Теги:
text
alignment

1 ответ

0
Лучший ответ

Попробуйте этот CSS:

div {
    clear:both;
}
p {
    margin:0;
}

Пример jsFiddle

Ещё вопросы

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