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

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

20
absolute html position wrap

9 ответов

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

5

Я знаю, что это более старый вопрос, но я наткнулся на него, чтобы сделать то, что, как я считаю, вы пытались. Я сделал решение, используя: before CSS selector, поэтому с 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

16

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

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

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

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

надеюсь, что это сделает трюк:)

5

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

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

4

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

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

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

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

и CSS:

.clear
{clear:both;}
3

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

0

вот трюк, который может сработать для некоторых:

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

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

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

0

существует простое решение этой проблемы. Он использует пробел: 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

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

0