Как я могу обернуть текст вокруг нижнего правого div?

Каждый раз, когда я пытаюсь сделать что-то вроде простого в CSS, он не работает.

У меня есть div для содержимого, который содержит изображение 460x160. Все, что я хочу сделать, это поместить изображение в нижний правый угол и обернуть вокруг него текст.

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

Итак, я хочу, чтобы он выглядел так:

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

Выполнение этого с левым верхним или верхним правым изображением - это торт:

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

Теперь, как я нажимаю это на дно? Самое лучшее, что я придумал до сих пор:

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

В этом случае текст не печатает на краю, поэтому над изображением будет свободное пространство.

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

В этом случае текст печатается над или под изображением.

Итак... как я могу это сделать?

Ответ 1

Кажется, что спрошено до (2003) и раньше (2002) или раньше (2005)

Последняя ссылка на самом деле предлагает javascript-решение, но для фиксированного (то есть не-жидкого) решения.

Однако он согласуется с другими найденными советами

Единственный способ сделать это - поместить перемещенный элемент где-нибудь в середине текста. Это невозможно сделать его идеальным все время.

Или этот:

Он состоит из плавающего вертикального элемента "толкателя" (например, img, но, вероятно, более умного, чтобы просто использовать пустой div), а затем плавающего над ним желаемого объекта с использованием свойства clear. Основная проблема с этим методом заключается в том, что вам все равно нужно знать, сколько строк текста. Это делает вещи намного проще, и, безусловно, может быть закодировано с помощью javascript, просто нужно изменить высоту "толкателя" на высоту контейнера за вычетом высоты поплавка (если ваш контейнер не фиксирован/мин. Высота),

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

Cletus упоминает в комментариях эту тему thread from 2003, которая еще раз подтверждает тот факт, что это невозможно. Тем не менее, он ссылается на эту статью статью Эрика Мейера, которая приближается к тому эффекту, который вы хотите достичь.

Понимая, как float и нормальный поток связаны друг с другом, и понимая, как очистка может использоваться для управления нормальным потоком вокруг float, авторы могут использовать float как очень мощный инструмент макета.
Поскольку поплавки изначально не предназначались для использования в макете, некоторые хаки могут быть необходимы, чтобы заставить их вести себя по назначению. Это может включать в себя плавающие элементы, которые содержат поплавки, "очистка" элементов или их комбинацию.

Ответ 2

Ну... это довольно старый пост, но я боролся и ушел с этим с небольшим обходным решением. Мне нужно было иметь изображение, выровненное вправо, и ровно 170 пикселей сверху. И нужен текст для потока сверху, слева и снизу изображения. Так что я сделал, это создать ширину 0px, с 170px высоты и поплавка вправо. Тогда img будет плавать и очищаться вправо и вуаля!

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Хорошо работает:)

Ответ 3

Самое простое решение, которое я нашел, - это обернуть img внутри элемента div, а затем использовать значения padding-top и margin-bottom для его выравнивания.

Это мой CSS

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

и вот HTML

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

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

Ответ 4

Для решения jQuery попробуйте плагин lowFloat, созданный gilly3: https://github.com/gilly3/lowFloat

Ответ 5

Решение, которое я нашел, включает в себя, что у вас есть div, ширина которого не изменяется, а также объем текста. Затем вы можете поместить изображение внутри текста и выравнивать его вправо. Поэтому, если у вас есть правильное количество текста вокруг него, вы получите изображение справа и внизу div.

    <style >
#contents{
    border: 2px solid red;
    background: #ddd;
    position: absolute;
    width:600px;
}



</style>
<div id="contents">
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...    text text text text text text ...
    text text text text text text ...    text text text text text text ...  <img src="http://daiphyer.com/images/daiphyerv6-sliced_02.png" ALIGN="RIGHT"/>
    text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...   
    text text text text text text ...    text text text text text text ...    text text text text text text ...
     hey hey text text text text text text ...    text text text text text text ...    text text text text text text ...    
    text text text text text text ...    text text text text text text ...
</div>

Ответ 6

В дополнение к опубликованному решению я использовал динамический JQuery для динамического использования отрегулируйте высоту толкателя, взяв высоту области, которую я хотел выровнять по правому краю от высоты области содержимого, и применив ее к div-толкателю, так:

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

Он нуждается в нескольких небольших настройках, но обычно работает так же хорошо, как вы собираетесь получить!

Ответ 7

Ok. Так что у меня на самом деле была такая же проблема, и в какой-то момент ответ ударил меня, как пирог с сыром в субботу вечером. Это почти тот же эффект попадания и промаха, который у вас есть, когда вы пытаетесь установить перенос текста в Word.

img.right {
     float: right;
}

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

<p>This is some text <img src="example.jpg" class="right" /> and then add
some more text.</p>

верхняя часть остается там, где она есть, и текст свободно плавает над изображением, а остальная часть сдвигается влево от изображения. Это обходной путь, но не такой уж утомительный, как использование JS, и если вы используете редактор WYSIWYG, это еще проще. Подумайте об этом, если вы используете редактор WYSIWYG, у него есть эта функция автоматически.: P Задача решена.

Приветствия.