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

Question

Каждый раз, когда я пытаюсь сделать что-то простое в 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 |
------------------

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

Итак ... как мне это сделать?

Answer 1

Похоже, что его спросили до (2003 г.) и до (2002 г.) или до (2005 г.)

Последняя ссылка фактически предлагает решение на основе javascript , но для фиксированного (т. Е. Не флюидного) решения.

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

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

или этот :

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

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

---

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

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

---

Тем не менее, Чедвик Мейер предлагает в свой ответ решение, основанное на :before CSS-селекторе (вариант Леонард ' с ответ ).
Здесь работает .

Answer 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

Работал довольно хорошо:)

Answer 3

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

Answer 4

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

Answer 5

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

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

Требуется несколько небольших настроек, но, как правило, они работают так же, как и вы!

Answer 6

Хорошо. Так что у меня действительно была такая же проблема, и в какой-то момент ответ ударил меня как сырный пирог в субботу вечером. Это почти тот же эффект попадания, что и при попытке установить перенос текста в 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 Проблема решена.

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

Answer 7

Решение, которое я нашел, заключается в том, что у вас есть 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>