Обтекание текста вокруг абсолютно позиционированного div

Question

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

    <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, поэтому ни один из этих кодов не является моим, просто он не полностью работает, когда дело доходит до размещения изображения там.

Answer 1

Я знаю, что это старый вопрос, но я наткнулся на него, пытаясь сделать то, что, как я полагаю, вы пытались сделать. Я сделал решение, используя селектор CSS: before, так что с ie6-7 не очень хорошо, но везде вы должны быть хорошими.

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

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

Вы можете проверить это здесь:

http://codepen.io/atomworks/pen/algcz

Answer 2

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

Чтобы обойти это, вы можете вместо этого использовать поля:

.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}

Надеюсь, это поможет:)

Answer 3

Как уже упоминалось @Kyle Sevenoaks, вы берете абсолютно позиционированный контент из потока документов.

Насколько я вижу, единственный способ заставить родительский элемент div обернуть абсолютное позиционированное содержимое - это использовать javascript для установки ширины и высоты при каждом изменении.

Answer 4

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

Answer 5

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

<div class="clear"></div>

И CSS:

.clear
{clear:both;}

Answer 6

По моему мнению, черта "Абсолют" плохо названа, потому что ее позиция на самом деле относительно позиции первого родителя, чья позиция не является статичной

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>

Answer 7

Мне нужно было подобное решение, чтобы получить выдвижную цитату (не изображение), в которой был бы текст переменной длины. Вытягивающую цитату нужно было вставить в HTML вверху (вне потока текста) и поместить в контент с текстом, который оборачивается вокруг него. Изменяя ответ Леонарда выше, есть действительно простой способ сделать это!

См. Codepen для рабочего примера: https://codepen.io/chadwickmeyer/pen/gqqqNE

CSS

/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
  content: '' ;
  display:block;
  float: right;
  /* The height is essentially a "margin-top" to push the pullout Container down page */
  height: 200px;
}

.pulloutContainer q {
  float:left;  
  clear:both;
  /* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
  width: 30%;
  /* Add padding as you see fit */
  padding: 50px 20px;
}

HTML

<div id="container">

  <div class="pulloutContainer">
      <!-- Pullout Container Automatically Adjusts Size -->
      <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
    </div>

    <div class="content">
       <h1>Sed Aucteor Neque</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</

      ...INSERT MORE TEXT HERE...

  </div>
</div>

Answer 8

Эта проблема легко решается. Используется пробел: nowrap;

<div class="position:relative">
 <div style="position: absolute;top: 100%; left:0;">
  <div style="white-space:nowrap; width: 100%;">
    stuff
  </div>
 </div>
</div>

Например, я делал выпадающее меню для навигации, поэтому я использовал настройку

<ul class="submenu" style="position:absolute; z-index:99;">
   <li style="width:100%; display:block;">
      <a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a>
   </li>
<ul>

Примеры изображений

Без включения Nowrap

С включенным Nowrap

Также, если вы все еще не можете понять это, проверьте выпадающие списки на шаблонах начальной загрузки, которые вы можете найти в Google. Затем выясните, как они работают, потому что они используют абсолютное положение и получают текст, занимающий 100% ширины, без переноса текста.

Answer 9

Вот уловка, которая может работать для некоторых:

если у вас есть контейнер, заполненный множеством объектов, и вы хотите, чтобы этот позиционированный объект отображался вверху в определенных случаях и ниже в других (например, на экранах разных размеров), то просто копируйте объект несколько раз в html, либо inline(-block), либо с помощью float, а затем display:none элементов, которые вы не хотите видеть в соответствии с необходимыми условиями.

Вот JSFiddle, чтобы точно показать, что я имею в виду: JSFiddle правильного позиционирования высокого и низкого уровня

Примечание: я добавил цвет только для эффекта. За исключением имен классов, div-субъект-1 и субъект-2 являются точными копиями друг друга.

Answer 10

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