Два параграфа / деления в строке

Question

Привет, я не уверен, как решить конкретную проблему, вот она.Без использования таблицы я хотел бы отобразить абзац с несколькими строками текста, а затем иметь изображение справа.

До сих пор я пробовал это:

<div id="container">
 <p>
  Some Text
  Some Text
  Some Text
  Some Text
 </p>
 <p>
 <img src="image.jpg"/>
 </p>
</div>

Я использую отдельныйТаблица стилей и пробовал такие вещи, как отображение в строке без удачи.

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

Спасибо.

Answer 1

Вам нужен еще один набор контейнеров для вашего контейнера:

<div style="float:left;width:50%">
<p>...<p/>
</div>
<div style="float:left;width:50%">
<p>...<p/>
</div>

Answer 2

Если вы можете рассмотреть возможность использования flexbox (который довольно хорошо поддерживается сейчас: https://caniuse.com/#feat=flexbox)

Вам просто нужно сделать ваш контейнер отображаемым: flex; (пример: https://codepen.io/anon/pen/GvZYwj)

#container { 
  display: flex;
}

Для получения дополнительной информации о flexbox вы можете начать с чтения MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.

И если вы хотите больше узнать о flexbox, есть замечательное руководство: http://flexboxzombies.com/p/flexbox-zombies

Answer 3

Хотите, чтобы текст обтекал изображение? Если да, то это примерно так:

http://jsfiddle.net/2FMPf/1/

Если вы хотите отдельный столбец для изображения, то это примерно так:

http://jsfiddle.net/2FMPf/2/

Answer 4

Если я понимаю, что вы хотите сделать. Вы можете присвоить тегу

класс / стиль и сделать float: прямо в CSS. Который будет выглядеть так:

<p style="float:right;"><img src="image.jpg" /></p>