Я знаю, что существует несколько вопросов о подобных темах, но они главным образом составляют плавание отделения/изображения. У меня должно быть изображение (и отделение) расположенный абсолютно (прочь направо), но я просто хочу текстовый поток вокруг этого. Это работает, если я пускаю в ход отделение, но затем я не могу расположить его, где я хочу. Поскольку это - текст, просто течет позади изображения.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" /></a></div>
<span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
Пример HTML
С CSS тем, чтобы быть:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
Это - тема Drupal, таким образом, ни один из этого кода не является моим, это просто, что это не является полностью рабочим когда дело доходит до помещения изображения там.
Абсолютное позиционирование выводит элемент из обычного потока документов, и поэтому он не взаимодействует с другими элементами. Возможно, вам стоит пересмотреть, как позиционировать его, используя вместо этого float, и спросить об этом здесь, в Stack Overflow, если вы застряли :)
Абсолютное позиционирование не позволяет переносить текст. Вы должны использовать float и position, используя margin или padding.