Плавающие изображения в собственную «колонку» без div

Question

Я хотел бы воссоздать вид следующей страницы в моем существующем блоге: http://jeff.klukas.net/bio/

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

В текущем проекте используется Blueprint CSS с парами элементов div для каждого раздела изображения и текста. Я хотел бы создать адаптивный дизайн, который будет сокращен до одного столбца для браузеров меньшей ширины, чтобы источник (сгенерированный из Markdown) выглядел так:

<img src=img1.png>
<p>First paragraph...</p>
<img> src=img2.png>
<p>Second paragraph...</p>

Что будет отображаться на узком экране как:

------------
|img1      |
------------
First paragraph
------------
|img2      |
------------
Second paragraph

Или на широком экране как:

------------  First paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more text.
------------  Second paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more text
              more text more text.

Я могу достичь большей части того, что я хочу, с помощью небольшого мошенничества, которое я знаю @media, но я не уверен, возможно ли добиться желаемого широкоэкранного макета без использования HTML Это просто сон?

Answer 1

Я думаю, что это должно быть возможно, особенно если вы можете определить или контролировать ширину изображений. На примере макета они все одинаковой ширины, что должно облегчить жизнь.

Как насчет этого: для узкого экрана просто оставьте изображения такими, какие они есть, а для более широкого экрана плавайте изображения слева, но оставьте абзацы левым полем, достаточно широким, чтобы вывести их из области изображения Например:

img {
  float: left;
}
p {
  margin-left: 400px; /* Or however wide your images are */
}

... а затем просто обслужите это, используя условный медиазапрос на ширину экрана, на которой вы хотите, чтобы изображения "выскакивали".

Вот рабочий пример. С котятами. Поиграйте с шириной области вывода, и вы должны найти тот эффект, который, я думаю, вы ищете. Если столбец меньше 400 пикселей, макет сворачивается в один столбец. У меня отлично работает в Safari и Firefox; вам может понадобиться шим, поддерживающий медиазапрос, чтобы работать с более старыми версиями IE, но макеты по-прежнему должны нормально работать.