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

<p>каждый раз, когда я пытаюсь сделать что-то простое в css, это не работает.</p><p>у меня есть div содержимого, который содержит изображение 460x160. все, что я хочу сделать, это расположить изображение в правом нижнем углу и обернуть вокруг него текст.</p><pre><code><div id="contents"> <img src="..." /> text text text text text text ... </div> </code></pre><p>поэтому я хочу, чтобы это выглядело так:</p><pre><code>------------------ | text text text | | text text text | | text text -----| | text text | | ------------------ </code></pre><p>делать это с верхним левым или верхним правым изображением - это торт:</p><pre><code>#contents img { float:right; } ------------------ | text text | | | text text -----| | text text text | | text text text | ------------------ </code></pre><p>теперь, как мне толкнуть это до дна? лучшее, что я придумал, это:</p><pre><code>#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px ------------------ | text text | | text text | | text text -----| | text text | | ------------------ </code></pre><p>в этом случае текст не печатается на полях, поэтому над изображением есть пробел.</p><pre><code>#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 | ------------------ </code></pre><p>в этом случае текст печатается поверх или под изображением.</p><p>итак ... как я могу это сделать?</p>

<p>ну ... это довольно старый пост, но я с трудом справился с этим небольшим обходным путем. мне нужно было выровнять изображение вправо и ровно 170 пикселей сверху. и нужен текст, чтобы течь сверху, слева и снизу изображения. так что я сделал, это создать ширину 0px, высоту 170px и плавающее право. тогда img будет плавать и очистить прямо и вуаля!</p><p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code><!-- 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</code></pre> </div> </div> </p><p>работал довольно хорошо :)</p>

<p>самое простое решение, которое я нашел, - это обернуть img внутри элемента div, а затем использовать значения padding-top и margin-bottom, чтобы выровнять его.</p><p>это мой css</p><pre><code>.contentdiv .bottomright img{ height: 130px; float:right; padding-top: 60px; margin-bottom: -10px; } </code></pre><p>а вот и html</p><pre><code><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> </code></pre><p>причина того, что отступы и поля работали для меня, заключается в том, что я использую их внутри родительского элемента «contentdiv» для автоматической настройки высоты div в соответствии с содержимым. не уверен, что его любое использование.</p>

<p>для решения jquery попробуйте плагин lowfloat, созданный gilly3: <a href="https://github.com/gilly3/lowfloat">https://github.com/gilly3/lowfloat</a> </p>

<p>в дополнение к опубликованному решению, я использовал быстрый взлом jquery для динамического регулировки высоты толкателя, взяв высоту области, которую я хотел выровнять по правому нижнему краю от высоты области содержимого, и применив его к элементу pusher, как показано ниже: </p><pre><code>$("#pusher").css("height", $("#content").height() - $("#contenttoalign").height() + 'px') </code></pre><p>требуется несколько небольших настроек, но в целом работает так, как вы собираетесь получить!</p>