Как я могу обернуть текст вокруг нижнего правого 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

Он уверен, по-видимому, было предложено before (2003) и before (2002) или before (2005)

Последнее звено на самом деле предлагают javascript-based solution, но для фиксированного решения (т.е. без жидкости).

Это согласуется, однако, с other advices found

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

Или this one:

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

В любом случае, как discussed in this thread, нет простого решения ...

---

Cletus упоминает в комментариях это thread from 2003, в котором говорится еще раз тот факт, что не может быть легко достигнута.
Однако это относится к этому Eric Meyer's article, который приближается к эффекту, который вы хотите достичь.

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

Answer 2

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

Answer 3

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 Задача решена.

Cheers.

Answer 4

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

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

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

Нужно несколько небольших уловок, но в целом работает так же хорошо, как и вы!

Answer 6

Самое простое решение, которое я нашел, - это обернуть 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 7

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