Невозможный HTML-макет?

0

Я пытаюсь создать макет страницы, подобный тому, что показано ниже (только CSS с поддержкой Chrome, Firefox, IE8+)

Примечание: столбцы 1,2,3 могут динамически увеличиваться (например, добавлять разметку из xhr и т.д.), И все они должны быть одинаковой высоты (высота наибольшего столбца). Кроме того, ячейка 4 также может расти, хотя должна быть только высотой ее внутреннего содержимого.

 _______________
|   |_____4_____|
|   |       |   |
| 1 |   2   | 3 |
|   |       |   |
|___|_______|___|

У меня проблема с этим кросс-браузером.

Моя попытка. Я создал упрощенный пример jsfiddle, чтобы показать свою попытку с использованием таблиц (используя rowspan/colspan), чтобы получить желаемый макет. Я предполагаю, что это по сути многомассивная компоновка css с твист...

Хотя таблицы, как правило, не должны использоваться для компоновки. Это был наименее опасный способ достижения желаемого результата в кросс-браузере.

Я использовал тайм-аут js для настройки высоты одного из столбцов (для имитации динамического добавления содержимого).

Проблема с моей попыткой:

В Firefox (и IE9/IE8) ячейка "4" (зеленая ячейка в jsfiddle) не будет уважать установленную высоту пикселя (высота становится больше), когда столбец 1 (красная ячейка) динамически растет. Просмотрите скрипт в Firefox, чтобы увидеть эту проблему. Почему клетка 4 растет, когда высота ячейки 1 обновляется?

Это НЕ проблема в Chrome.

  • 0
    Какой вопрос?
  • 2
    Flexbox ... конец обсуждения.
Показать ещё 3 комментария
Теги:
tablelayout

3 ответа

0
Лучший ответ

Используя технику, описанную в этой статье, добавленную в комментарии выше, я смог создать работоспособное кросс-браузерное решение (CN10), которое вы можете найти - здесь

Разметка довольно проста и не требует таблиц

<div class="container">
    <div class="leftCol">left col
        <div class="leftColContent"></div>
    </div>
    <div class="header">header</div>
    <div class="centerCol">center col</div>
    <div class="rightCol">right col</div>
</div>
Поделиться
0

Помогло бы что-нибудь подобное?

http://jsfiddle.net/cku7y/5/

<div class="wrapper">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
    <div class="violet"></div>    
</div>

(проверьте jsfiddle css) Конечно, он может быть улучшен, но он начинается без использования таблиц.

Поделиться
  • 0
    Спасибо за ответ, Эндрю, я изначально попробовал этот подход, но он предполагает установку фиксированной высоты на обертку. Что я не могу сделать.
  • 0
    Я думаю, что это то, что вы должны посмотреть: css-tricks.com/fluid-width-equal-height-columns Есть несколько решений
Показать ещё 3 комментария
0

Я уверен, что вы можете сделать это так.

http://jsfiddle.net/V3ta3/2/

Установите двойной контейнер, и вам не нужны фиксированные значения.

<div class="container">
<div class="wrapper">
    <div class="column1">
        <p>Column 1</p>
    </div>
    <div class="wrap-right-side">
        <div class="column4">
            <p>Column 4</p>
        </div>
        <div class="right-side">
            <div class="column2">
                <p>Column 2</p>
            </div>
            <div class="column3">
                <p>Column 4</p>
            </div>
        </div>
        <!-- end right side -->
    </div>
    <!-- end wrap right side -->
</div>
<!-- end wrapper -->
</div>
<!-- end container -->

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

Поделиться
  • 0
    Как было сказано ранее, три колонны должны расти вместе и иметь одинаковую высоту.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню