Как я могу обернуть текст вокруг нижнего правого 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 |
------------------
в этом случае текст печатается над или под изображением.
так... как я могу это сделать?
7 ответов:
кажется, его спросили before (2003) и перед (2002) или перед (2005)
последняя ссылка на самом деле предложить javascript-решение, но для фиксированного (т. е. не жидкого) решения.
Это согласуется, однако, с прочие советы нашел
единственный способ сделать это-поместить плавающий элемент где-то в середине текста. Это невозможно чтобы получить его совершенным все время.
или этот:
Он состоит из плавающего элемента вертикального "толкателя" (например, img, но, вероятно, разумнее просто использовать пустой div), а затем плавает нужный объект под ним, используя свойство clear. Основная проблема с этим методом заключается в том, что вам все еще нужно знать, сколько строк есть в тексте. Это делает вещи намного проще, хотя, и определенно может быть закодировано с помощью javascript, просто нужно чтобы изменить высоту "толкателя" на высоту контейнера минус высота поплавка (при условии, что ваш контейнер не фиксирован/мин высота).
во всяком случае, как обсуждается в этой теме, нет простого решения...
Клетус упоминает в комментарии поток от 2003, что еще раз говорит о том, что это не может быть легко достигнуто.
Однако, это относится к этому Эрик Статья Мейера, который приближается к эффекту, который вы хотите достичь.понимая, как поплавки и нормальный поток связаны друг с другом, и понимая, как очистка может использоваться для управления нормальным потоком вокруг поплавков, авторы могут использовать поплавки в качестве очень мощного инструмента компоновки.
Поскольку поплавки изначально не предназначались для использования в макете, некоторые хаки могут потребоваться, чтобы заставить их вести себя так, как предполагалось. Это может включать в себя плавающие элементы которые содержат поплавки," очищающие " элементы или их комбинацию.
хорошо... это довольно старый пост, но я боролся и ушел с этим с небольшой workaround. Мне нужно было выровнять изображение справа и точно 170px сверху. И нужен текст на верхней, левой и нижней части изображения. Так что я сделал, это создать то, что имеет ширину 0px, с 170px высоты и поплавка справа. Тогда рис будет плавать и ясно, и вуаля!
<!-- 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работала очень хорошо :)
самое простое решение, которое я нашел, - это обернуть 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 в соответствии с содержанием. Не уверен, что это полезно.
для решения jQuery попробуйте плагин lowFloat, созданный gilly3:https://github.com/gilly3/lowFloat
В дополнение к опубликованному решению я использовал быстрый jQuery hack для динамического отрегулируйте высоту толкателя, взяв высоту области, которую я хотел выровнять внизу справа от высоты области содержимого, и применяя ее к толкателю div, как так:
$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')для этого нужно несколько небольших настроек, но в целом работает так же хорошо, как вы собираетесь получить!
решение, которое я нашел, включает в себя, что у вас есть 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>
ОК. Так что у меня на самом деле была такая же проблема, и в какой-то момент ответ ударил меня, как субботний вечер сырный торт. Это почти тот же эффект хита и промаха, который у вас есть, когда вы пытаетесь установить перенос текста в 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 проблема решена.
Ура.