it-swarm.com.ru

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

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

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

55
CodingWithSpike

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

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

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

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

Или этот :

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

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


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

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


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

28
VonC

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

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

16
Mauricio Morales

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

1
Galimbek Sagidenov

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

1
user6050419

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

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

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

0
Spikeh