Автор Гілка: div'и однакової висоти [SOLVED]  (Прочитано 1183 раз)

Відсутній piktor

  • Видавець
  • *******
  • дописів: 3396
  • Карма: +0/-0
Питання кросплатформове і не стосується конкретно ВПЗ, але, оскільки, реалізується саме за допомогою нього, то, гадаю, запишу сюди.
Є три блоки-колонки із стилем div {float:left;}, в яких є якийсь вміст - текст, скажімо. Блоки за шириною будуть рівними, а от висота буде залежати від кількості тексту у них. Під трьома блоками стоїть четвертий (підвал) із div {clear:both;} із своїм вмістом.
Треба зробити так, щоб всі три колонки-блоки були однакової висоти, за найбільшим із них, навіть якщо вмісту а решти двох не вистачає, щоб їх розтягнути до такої висоти.
За допомогою таблиць таке реалізувати неважко, але бажано все-ж блоками. В інтернеті зустрічав купу милиць, складних та неочевидних.
« Змінено: 2013-01-12 21:12:22 від Piktor »
Всим, хто тоне й не знає,
За що вхопитись,
Хто вже з останніх
Вибився сил:
Попереджаю - я не колода,
Попереджаю - я крокодил.

Відсутній piktor

  • Видавець
  • *******
  • дописів: 3396
  • Карма: +0/-0
Re: div'и однакової висоти [SOLVED]
« Відповідей #1 : 2013-01-12 21:14:16 »
А собака поруч покопався для div контейнера робиться display:table; а для div колонок - display: table-cell;
Не зовсім те, чого я хотів (по суті, та-ж таблиця), але на вигляд практично задовольнило.
Всим, хто тоне й не знає,
За що вхопитись,
Хто вже з останніх
Вибився сил:
Попереджаю - я не колода,
Попереджаю - я крокодил.

Відсутній peinguin

  • Літератор
  • ******
  • дописів: 1418
  • Карма: +0/-0
Re: div'и однакової висоти [SOLVED]
« Відповідей #2 : 2013-01-19 10:40:21 »
це костиль насправді. якщо треба таблиця - використовуйте <table>, власне ви так і зробили.
В гуглі багато нормальний рішень.
Наприклад min-height:100%; Там найбільший блок буде розтягувати батьківський блок - а менші блоки із-за height 100% будуть підтягуватись. Але такий прикол не працює із float:left із-за, того, що такі блоки випадають із загального потоку.
Ніколи! Ніколи не використовуйте float:left; right - це можна, якщо треба, щоб блок був справа. Але якщо блоки мають бути один біля одного - display:inline-block; в допомогу.

А взагалі - напишіть мені. Я гляну код і посовітую на місці.

Відсутній piktor

  • Видавець
  • *******
  • дописів: 3396
  • Карма: +0/-0
Re: div'и однакової висоти [SOLVED]
« Відповідей #3 : 2013-01-19 12:16:06 »
Цитата
В гуглі багато нормальний рішень.
В гуглі я, якраз, знаходив float:left. Але спробую, відпишуся. Це для себе робиться, не спішно.
Всим, хто тоне й не знає,
За що вхопитись,
Хто вже з останніх
Вибився сил:
Попереджаю - я не колода,
Попереджаю - я крокодил.

Відсутній peinguin

  • Літератор
  • ******
  • дописів: 1418
  • Карма: +0/-0
Re: div'и однакової висоти [SOLVED]
« Відповідей #4 : 2013-01-20 15:50:49 »
float:left - пережиток нехорошого IE6.