Размер последнего блока при верстке с float

12
Garnet_Fox
На сайте с 24.08.2012
Offline
62
1003

Добрый день, уважаемые форумчане!

Возник у меня вопрос, по верстке, с которым мне что-то не удается разобраться.

Есть блок, у него выставлено выравнивание float:left, задана высота, в нем есть блоки у которых также задан float и также известна высота, кроме последнего, необходимо растянуть последний блок до конца родителя средствами css, реально ли это?

Вот тут набросал как это выглядит: https://jsfiddle.net/Garnet_Fox/mehq229t/2/

lutskboy
На сайте с 22.11.2013
Offline
180
#1

посмотрите в сторону CSS flexbox

там можно разные чудеса творить

Garnet_Fox
На сайте с 24.08.2012
Offline
62
#2

Не подойдет, flexbox имеет слабую кроссбраузерность :(

S
На сайте с 30.09.2016
Offline
469
#3

Если количество блоков фиксировано, то просто задайте высоту последнему блоку, и не заморачивайтесь.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Garnet_Fox
На сайте с 24.08.2012
Offline
62
#4

Это было бы слишком просто, шучу :)

К сожалению это не представляется возможным, внутренние блоки, это блоки меню, количество которых на различных страницах - различно, простите за тавтологию, то есть проблема шире, я её упростил...

Z0
На сайте с 03.09.2009
Offline
784
#5

А чем jquery не устраивает? 2 строки:


var h = $('.wrapper').height()-($('.float').length-1)* ( $('.float').height()+2+8 )-2;
$('.float').last().css({'height':h+'px'});

https://jsfiddle.net/mehq229t/8/

Garnet_Fox
На сайте с 24.08.2012
Offline
62
#6

Года пол назад, как раз на нем и реализовал, но это костыль всё-таки...

Хотелось бы элегантного решения средствами css, если это возможно конечно... ) Собственно даже вопрос наверное не как, а реально ли вообще?

Z0
На сайте с 03.09.2009
Offline
784
#7
Garnet_Fox:
Года пол назад, как раз на нем и реализовал, но это костыль всё-таки...

Хотелось бы элегантного решения средствами css, если это возможно конечно... ) Собственно даже вопрос наверное не как, а реально ли вообще?

Таблицами забабахайте 🤣

V2
На сайте с 21.06.2013
Offline
47
#8
ziliboba0213:
Таблицами забабахайте 🤣

Ну как бы вариант. А что-бы код не засирать, использовать CSS display:table и display:table-cell

Z0
На сайте с 03.09.2009
Offline
784
#9
vl273:
Ну как бы вариант. А что-бы код не засирать, использовать CSS display:table и display:table-cell

Дивами все равно не получится, вроде...

V2
На сайте с 21.06.2013
Offline
47
#10

и так и сяк - не получается.

Можно в php динамически вычислять и передавать в css готовое значение. Хотя это аналогично варианту с js в том плане, что тоже костыль.

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий