Блок в правом нижнем углу и обтекание его текстом?

Question

[ChemAli]

Нужно разместить блок в правом нижнем углу контейнера таким образом, чтобы его обтекал текст слева и при этом высота строк в контейнере оставалась неизменной. У меня получалось только так, что строки рвались.


Песочница: jsfiddle.net/Wbu5C/

Answer 1

[gelas]

Если блоки фиксированных размеров и можно текст завернуть еще в div, то есть вот такой не слишком красивый вариант
http://jsfiddle.net/zPcVE/

Comments

[rvsob]

Интересный у вас вариант. Поправил его с JS (только не мутулс, а JQ) для универсальности.

[rvsob]

Забыл. Ссылка: jsfiddle.net/zPcVE/

[rvsob]

Неверная ссылка. Не разобрался с сервисом, да и тормозит он сейчас.
jsfiddle.net/RdKvS/

[ChemAli]

Вполне себе вариант, как будто работает универсально. Спасибо Вам!

Answer 2

[simplecode]

добавь
float: right;
в #botright {}

Comments

[simplecode]

jsfiddle.net/Wbu5C/ — прикольная, кстати, штука…

[rvsob]

Вы читали заголовок? Про нижний угол там не просто так сказано.

[simplecode]

а Вы пример тестировали?

[simplecode]

он уже внизу…

[simplecode]

да, извиняюсь… недоглядел…

[ChemAli]

Это лишь переносит #botright вправо, но он при этом еще и вылез за границы контейнера. Некомильфо.

Answer 3

[kyrie]

Как ни странно, так и не придумал, как решить эту задачу в лоб, под ваши условия.

Если сделать float:right то во-первых нужно поменять блоки местами, обратный порядок вывода элементов, про него часто забывают, во-вторых нужно будет каким-то образом опустить блок до нижнего угла. Что проблема, т.к. если сделать это марджином, то текст не будет обтекать.

Дальше у нас куча хаков, в зависимости от вашей задачи.

Если это просто нарисованный уголок, то лучше всего задать его background-position:bottom right.

Или можно задать контейнеру абсолют, тогда можно будет воспользоваться right: 0 и bottom: 0, задав красному квадрату тоже абсолют. Правда обтекания все равно не будет.

Сейчас еще подумаю.

Answer 4

[GrassNetworks]

вниз можно опустить минусовым маржином

Comments

[ChemAli]

Не подходит — высота контейнера может меняться.

Answer 5

[Петруша Укропов]

Недавно сталкивался с похожим, как вариант — добавить позиционирование — jsfiddle.net/PnCuK/

Comments

[rvsob]

Текст не обтекает, ёпрст.

Answer 6

[Miniwe]

Если знать высоту контейнера, то можно попробовать сделать вот так: jsfiddle.net/Gh5YN/3/.
Надо установить высоту правой стороны = контейнер — высота нижнего правого блока.
Если меняется, то добавить JS.