Несколько изображений с плавающей точкой по всей текстовой статье - PullRequest
2 голосов
/ 07 октября 2011

Проблемы с CSS, и я думаю, что я хочу, возможно без javascript, но я не уверен.

У меня есть текстовая статья, которую я хочу отобразить с 0-3 изображениями (число является динамическим для каждой статьи). Я хочу отобразить все 3 изображения в правой части страницы, между ними должно быть около 200-300 пикселей. Этого я достиг, просто плавая изображения, используя четкие поля и поля.

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

Возможно ли это даже без js? Текст также полностью динамический, поэтому я не могу использовать какой-либо элемент в тексте в качестве якоря.

РЕДАКТИРОВАТЬ: Вот код, чтобы объяснить немного:

Теги:

<div>
    <img class="floater" src="get_file.asp?image=1"/>
    <img class="floater" src="get_file.asp?image=2"/>
    <img class="floater" src="get_file.asp?image=3"/>
    <p>lots and lots of text and paragraphs go here....</p>
</div>

CSS:

.floater
{
    float:right;
    height:250px;
    clear:both;
    margin-top:200px;//This creates space between the images, but the text doesn't flow between them
}

Ответы [ 2 ]

2 голосов
/ 08 октября 2011

Вы можете достичь этого только с помощью дополнительных вспомогательных элементов.

Посмотрите на эту скрипку: http://jsfiddle.net/kizu/BwySX/

Вы просто добавляете вспомогательные элементы с нулевой шириной, чтобы они толкали ваши поплавки с помощьюих высота, но поскольку они имеют нулевую ширину, текст почти идеально подходит к ним.

0 голосов
/ 07 октября 2011

Не уверен, что это возможно.Поле всегда сдвигает все в стороны.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...