такая же высота столбцов с 960.gs?

у меня есть 4 столбца в одной строке, и в зависимости от того, сколько информации я помещу в каждый из них, они будут иметь разную высоту. вы можете увидеть это, если вы поместите на них фоновый цвет.

как я могу дать другим столбцам высоту столбца с наибольшей высотой?


css 960.gs
person ajsie    schedule 30.01.2010    source источник
comment
Используйте таблицу. (уворачивается и убегает)   -  person Pekka    schedule 30.01.2010

Ответы (3)


arrow_upward
4
arrow_downward

Для этого вы можете использовать jQuery. http://www.cssnewbie.com/equal-height-columns-with-jquery/

В качестве альтернативы для подхода только с CSS вы можете сделать так, чтобы они выглядели так, как будто они имеют одинаковую высоту, обернув все столбцы в div, а затем применив одно фоновое изображение с 4 блоками цвета, которые соответствуют ширине столбца.

Этот div-оболочка расширится до размера самого большого столбца и создаст впечатление 4 столбцов одинакового размера.

person Matt    schedule 30.01.2010

arrow_upward
2
arrow_downward

Ну, я не знаю, работает ли это для 960, но в Blueprint вы можете получить это, применив к столбцам следующий стиль:

padding-bottom : 20000px;
margin-bottom : -20000px;
overflow:hidden;
person Alextronic    schedule 30.01.2010
comment
Хммм... Бывает ли так же, если, не удаляя предложенный выше стиль, попробовать обернуть столбцы в ‹div›? Затем вы можете попробовать применить класс .clearfix (webtoolkit.info/css-clearfix.html) Просто предположил. - person Alextronic; 30.01.2010

arrow_upward
2
arrow_downward

Вы можете использовать свойство CSS display: table-cell

http://jsfiddle.net/AGjBM/

<style>
    div.table-cell {
        display: table-cell;
        border: 1px solid;
    }
</style>

    <div class="table-cell">
        Some Text
    </div>
    <div class="table-cell">
        Some Text<br>
        Some More Text
    </div>
person gentooboontoo    schedule 23.02.2011