Как растянуть на всю ширину таблицу, которая обтекает изображение?

Question

[Kovalsky]

Есть всего два элемента:

<img />
<table>...</table>

Возможно сделать так, чтобы таблица обтекала img и растягивалась на всю доступную ширину? Пока что у меня таблица обтекает img, но берёт ширину контента. Вот нерабочий пример.

Comments

[Kovalsky]

В частности, очень рассчитываю на Ankhena.

[Ankhena]

Никита Полевой, все проспала :(

[Kovalsky]

Ankhena, да ладно, зато какое надёжное решение найдено)

Answer 1

[Ярослав Иванов]

Новое
https://jsfiddle.net/space2pacman/05uud34k/21/

Старые
https://jsfiddle.net/space2pacman/05uud34k/17/
https://jsfiddle.net/space2pacman/05uud34k/18/
https://jsfiddle.net/space2pacman/05uud34k/19/
https://jsfiddle.net/space2pacman/05uud34k/20/

Comments

[Kovalsky]

Спасибо!

[Ярослав Иванов]

Никита Полевой, Добавьте тогда контента в мой вариант.

[Kovalsky]

Ярослав Иванов, да нет, такое решение тоже в принципе имеет право на жизнь, просто оно не адаптивно и имеет ограниченное применение, т.к. контента чаще всего бывает действительно много, а тогда снизу под изображением остаётся много пустого пространства.

[Ярослав Иванов]

Никита Полевой, Еще можно сделать для tabel display: block;
Или display: -webkit-box; оно идеально вписывается ))

[Kovalsky]

Ярослав Иванов, сам по себе каст таблицы в тип block особенно ничего не даёт, но это дало мне идею, как можно использовать обтекание для достижения этого эффекта, еще раз спасибо)

[Ярослав Иванов]

Никита Полевой, Как не дало?) у меня таблица стала обтекать изобраение правда часть рамки под картинку ушла. Но если без рамки делать то все ок)

[Kovalsky]

Ярослав Иванов, вот-вот, проблема именно в том, что таблица по факту не обтекает изображение, она растягивается на 100% ширины контейнера, а обтекает именно текст в таблице. Но думаю это тоже можно как-то использовать.

[Ярослав Иванов]

Никита Полевой, Как вам 19-ый вариант ?

[Ярослав Иванов]

Никита Полевой, Хотя по-моему надо было просто сделать для td width: 100vw;

[Ярослав Иванов]

Ярослав Иванов, https://jsfiddle.net/space2pacman/05uud34k/21/

[Kovalsky]

Ярослав Иванов, какой же я тупой, и правда ведь можно было пользоваться преимуществами табличного layout'а - просто задать ячейке большую ширину чем это вообще возможно, в том числе например так.

Спасибо!

[Ярослав Иванов]

Никита Полевой, Можете отметить если подошло)))

Answer 2

[Егор Живагин]

Так, например

UPD - чуть обновил, чтоб за страницу не вылазило. Вместо "vw" можно в "%"

Comments

[Kovalsky]

Спасибо!

Без флекса не получится?

[doweb]

Никита Полевой, Без флекса можно сделать с использованием функции calc(), но нужно знать точную ширину картинки и маргин от нее
https://jsfiddle.net/05uud34k/8/

[Егор Живагин]

Никита Полевой, можно задать картинке фиксированную ширину, а таблице ширину через calc( 100% - <ширина картинки> ) . Позиционировать через float . Но это не самое удобное решение

[Kovalsky]

Konstantin, Егор Живагин, да, это конечно вариант, но тоже грустный. Без фиксированных размеров и calc не обойтись? У меня было, например, предположение, что можно попробовать инвертировать роли - сделать таблицу обтекаемой, а картинку - обтекающей. Но и в этом случае у меня не особо получилось ничего достичь по задаче.

[Егор Живагин]

Никита Полевой, дело не в обтекании, а в размерах. Вам же надо, чтоб один блок растянулся на всю ширину окна - (минус) ширину второго блока

[Егор Живагин]

Никита Полевой, с flex-ами норм вариант же, и поддержка хорошая уже )

[Kovalsky]

Егор Живагин, да, но к сожалению не вся верстка происходит в рамках www, значительная часть верстки приходится на специализированные среды, в частности в моём проекте для использования flex 1) мне придётся очень хорошо постараться, чтобы убедить разработчиков в том, что мой use case действительно заслуживает внимания, 2) запросить полноценную поддержку модели flexbox, 3) пить чай до тех пор, пока разработчики не решат задачу. А это ооочень много чая. Поэтому хотелось бы решить такую мелкую задачу какими-нибудь элементарными механизмами CSS.

[Егор Живагин]

Никита Полевой, понял, соболезную

Тогда фиксировать ширину картинки - лучший вариант, я думаю. Можно задать её в процентах и указать min-width , хоть какая-то резина будет

[Kovalsky]

Егор Живагин, это вы о варианте с calc?

[Егор Живагин]

Никита Полевой, да

[Егор Живагин]

Никита Полевой, или calc тоже нельзя? )

[Kovalsky]

Егор Живагин, ну, в данный момент его поддержки тоже нет, но с ним всё же проще чем с флексбоксом. Так что пока этот вариант видится мне самым простым, спасибо!

[Егор Живагин]

Никита Полевой, да не за что

Answer 3

[doweb]

Можно сделать с помощью flex, добавив обертки
https://jsfiddle.net/05uud34k/6/