Перенос текста вокруг абсолютного расположенного отделения

Я знаю, что существует несколько вопросов о подобных темах, но они главным образом составляют плавание отделения/изображения. У меня должно быть изображение (и отделение) расположенный абсолютно (прочь направо), но я просто хочу текстовый поток вокруг этого. Это работает, если я пускаю в ход отделение, но затем я не могу расположить его, где я хочу. Поскольку это - текст, просто течет позади изображения.

    <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&#039;s picture" title="neatktp&#039;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, таким образом, ни один из этого кода не является моим, это просто, что это не является полностью рабочим когда дело доходит до помещения изображения там.

23
задан double-beep 18 April 2019 в 18:23
поделиться

2 ответа

Абсолютное позиционирование выводит элемент из обычного потока документов, и поэтому он не взаимодействует с другими элементами. Возможно, вам стоит пересмотреть, как позиционировать его, используя вместо этого float, и спросить об этом здесь, в Stack Overflow, если вы застряли :)

4
ответ дан 29 November 2019 в 01:58
поделиться

Абсолютное позиционирование не позволяет переносить текст. Вы должны использовать float и position, используя margin или padding.

0
ответ дан 29 November 2019 в 01:58
поделиться