Каким способом выравнять картинки относительно абзаца слева?

mooncar · January 25, 2011

Верстальщик из меня так себе, но вот встал вопрос, поэтому хотел обратиться за советом.

Есть <div>, в которм бдует распологаться текст с иллюстрациями.

Задача состоит в том чтобы правильно сформатировать положение картинок относительно текста.

текст идет сплошной лентой, разбитой на абзацы. Если бы картинки требовалось расположить внутри него, слева или справа, неважно как, вопроса бы не было.

Но необходимо, чтобы картинки располагались слева от определенных абзацев <p> на определенном фиксированном расстоянии. То есть как бы две колонки - одна узкая для картинок, вторая широкая для текста.

Как это лучше всего сделать? Идеи такие - создать для колонок два <diva>, и в каждом располагать соответственный материал, при этом абзацы бы шли как идут, а картинки пришлось бы подгонять по вертикальным отступам внутри первой колонки. Но мне кажется, что это неправильно.

Наверное как-то можно ориентировать картинки слева от текста, отталкиваясь от положения абзаца непосредственно, то есть все сделать в одном <div>?

Как лучше всего поступать в таких случаях?

Vlad · January 25, 2011

Например так.

<p>Рубленное вручную бревно...</p>

mooncar · January 25, 2011

Спасибо.

То есть предварять каждый <p> нужной картинкой с таким стилем?

Edited January 25, 2011 by mooncar

mooncar · January 25, 2011

Всплыл один нюанс. Таким методом, если ширины картинок разные, то зазор между текстом и картинками будет неодинаковым.

К сожалению, сразу об этом не подумал.

Я хотел, чтобы картинки "уходили" шириной влево. Как быть в таком случае?

rash · January 25, 2011

Абсолют вместо флоата. И задавать только горизонтальную координату.

mooncar · January 25, 2011

Абсолют вместо флоата. И задавать только горизонтальную координату.

То есть без ручного задания координат никак? Я полагал, что можно просто привязать картинку к началу абзаца без использования точного позиционирования.

Ведь текст может измениться и высота абзаца тоже изменится.. да и в разных браузерах строки могут по разному отрендериться...

Может быть возможно привязать margin'ом картинку к правому краю основного блока, без отрицательной величины, и с учетом ширины этого блока и сохранением float:left?

Edited January 25, 2011 by mooncar

rash · January 25, 2011

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

Ширина колонок постоянная, задана в процентах или как-то иначе?

mooncar · January 25, 2011

Пока приходит в голову только способ с лишней оберткой, но должно быть можно лучше.
Ширина колонок постоянная, задана в процентах или как-то иначе?

Лишняя обертка - это не страшно.

Ширина "колонок" постоянная. Ширина картинок только разная может быть. Таков макет.

rash · January 25, 2011

Ох, ну тогда как-то так:

Заворачиваете картинку в какой-нибудь блочный элемент, ширина у него задана жестко — это ширина колонки с картинками минус отступ до текста. Ему - флоат влево.

Внутри этого блока флоатите картинку вправо.

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

Если очень нужно - рабочий пример набросаю попозже.

mooncar · January 25, 2011

Заворачиваете картинку ...

Попробую сделать так, насчет контейнера понял, насчет потока не очень, я немного другим занимаюсь, нежели версткой.

Если не получится, можно будет к вам в личку стукнуться?

Tmin10 · January 25, 2011

По мне, так тут таблица прямо сама просится...

mooncar · January 25, 2011

Разобрался. Еще один товарищ подсказал насчет контейнеров.

Вот такое решение получилось:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.left-column-div
{
	width: 220px;
	float: left;
	text-align: right;
}
.right-column-p
{
	width: 400px;
	margin-left: 300px;
}
</style>

</head>

<body>

<div class="left-column-div"><img src="" alt="" width="150" height="150" /></div>
<p class="right-column-p">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p class="right-column-p">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="left-column-div"><img src="" alt="" width="180" height="150" /></div>
<p class="right-column-p">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

По мне, так тут таблица прямо сама просится...

Да вроде никак не просится. Текст должен идти валом, абзацами, без разбиения на строки, а картинки должны привязываться к началу абзацев.

С таблицами же так не получится, нет нужной гибкости.

Int · January 25, 2011

можно текст сделать float:left и задать отступ слева

rash · January 25, 2011

Разобрался. Еще один товарищ подсказал насчет контейнеров.
Вот такое решение получилось
...

Так даже лучше, хорошее решение — флоатом меньше.

А насчет очистки потока — это если картинки будут выше текста придется задумываться.

swetlana · January 25, 2011

на самом деле так себе решение.

Контейнер — да, в данном случае меньшее из зол. Но в этом решении есть и подводные камни.

Может посмотрите в сторону чуть более простого решения?

<p>
<figure><img src="woodhouse.png" /></figure>
тут много или не очень текста про деревянные дома
</p>

и в css:

p {
padding-left: 180px; /* от самого левого края до левого края непосредственно абзаца */
overflow: hidden; /* если текста в абзаце мало, чтобы не выстраивались абзацы лесенкой */
}
p figure {
width: 150px; /* сколько не жалко под колонку с картинками слева */
text-align: right; /* чтобы внутри выделенной под картинки колонки сами картинки выравнивались по правому краю */
}

mooncar · January 25, 2011

Спасибо всем поучаствовавшим за уделенное время. Рассмотрю все варианты.

(<div>-ная верстка для меня пока трудновата, в голове табличная застряла.)

Верстать приходится нечасто, но иногда случается, и помощь была очень кстати!

Edited January 25, 2011 by mooncar

swetlana · January 25, 2011

К.О. подсказывает, что дивная именно потому и трудновата, что табличная в голове застряла

Хотя на мой взгляд дивная — ненамного меньшее зло, чем табличная.

Обратите внимание на возможность семантической разметки. То есть, размечать документ исключительно по смыслу, по значению элементов. И оформлять уже то, что получилось в результате семантической разметки. В большинстве случаев возможностей css хватает.

а все эти дивные и табличные варианты, когда разметка строится исходя из оформления — это лишние сложности.

rash · January 25, 2011

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

Чуть красивее в плане структуры, но на очень развесистых страницах (не верю, что эта страница когда-нибудь столкнется с такой проблемой) получим чуть более медленный рендеринг. На десятках тысяч элементов при динамических действиях с DOM

Так что на самом деле стоит взять это решение и не париться, так покрасивее.

Добавлено: упс... figure в p вкладывать нельзя

swetlana · January 25, 2011

…упс... figure в p вкладывать нельзя

воистину упс.

Хотя принцип от этого не меняется. Можно использовать другой элемент. Например <a>, если картинка должна быть ссылкой или на неё планируется какой-нибудь лайтбокс повесить. Или даже безликий <span>. Только им придётся явно дописать display: block. Но это ж не проблема, не так ли?

Sign In

Каким способом выравнять картинки относительно абзаца слева?

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information