Как сверстать данный шаблон?

Привет всем, кто это читает :)
Есть шаблон с вот таким расположением блоков:
image

Дело в том, что высота среднего может меняться так как там внутри текст. Хочется чтобы высота у столбцов была одинаковая… Не могу приложить ума каким образом сверстать такое.

Заранее благодарю :)
  • Вопрос задан
  • 3173 просмотра
Пригласить эксперта
Ответы на вопрос 8
P1RATE
@P1RATE
http://jsfiddle.net/5Kzrk/

На кроссбраузерность не проверял, но должно работать

Идея в том, что нужно тянуть левый нижний, правый нижний и центральный блоки
Ответ написан
gaelpa
@gaelpa
csstemplater.com/ — это первое, что нашел по запросу «layout generator».
Ответ написан
1. три колонки одинаковой высоты, например;
2. в боковых применить технику, как для приклеенного к низу футера.

Ну, или таблицами: в боковые вложить ещё по таблице.
Ответ написан
Nesvet
@Nesvet
Разработчик
Можно таблицей. Например, так:

HTML:
<table>
    <tbody>
        <tr>
            <td rowspan="4">1</td>
            <td rowspan="7">2</td>
            <td rowspan="5">3</td>
        </tr>
        <tr></tr>
        <tr></tr>
        <tr></tr>
        <tr>
            <td rowspan="3">4</td>
        </tr>
        <tr>
            <td rowspan="2">5</td>
        </tr>
        <tr></tr>
    </tbody>
</table>​


CSS:
table {width: 100%}
tr {height: 50px}
td {border: 1px solid black}​


jsfiddle.net/zXNGR/
Ответ написан
Makito
@Makito
front-end developer
если акцент на блоках делается по цвету, то самый простой вариант — сделать на таблице в 3 колонки, разрыв крайних блоков можно сделать через задание цвета подложки промежуточным блокам
Ответ написан
shvedovka
@shvedovka
Ну вот просто 3 колонки jsfiddle.net/bA3fA/
А вот в точности как на рисунке jsfiddle.net/bA3fA/1/ (можно по высоте контентом растягивать любую ячейку, но с использование js)
Ответ написан
Ребят зачем таблицей все таки 2012 на дворе а не конец 90-х) вообще я уже как год пользуюсь csstemplater.com/ экономит времени и вообще удобная штука)

А если нужно такой шаблон, то я бы в левую и правую колонку добавил по два дива) ну а тянуть по высоте на js) На csstemplater.com/ есть эмуляция высоты правой и левой колонки) на ccs кросс браузерная, проверял работает даже в ie6.
Ответ написан
azizoid
@azizoid
что вы делаете? ничего не надо… jquery.masonry.js и все!
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы