Как сделать кросс-платформенную, основанную на CSS одинаковую высоту столбца? - PullRequest
Новая
       11

Как сделать кросс-платформенную, основанную на CSS одинаковую высоту столбца?

2 голосов
/ 03 марта 2011

Я пробовал это с DIV.Проблема возникает в обоих.Я не могу получить правильную границу, чтобы быть равной высоты как самый длинный DIV.И мне нужно, чтобы это работало во всех браузерах настольных компьютеров со времен IE7 и выше.

Это обычная проблема, но сейчас, когда я пишу это, наступил 2011 год.Наконец, есть ли способ сделать это с помощью чистого кроссплатформенного CSS, не прибегая к таким приколам, как притворство, чтобы заставить его работать (например, отсечение столбцов)?Или я должен прибегнуть к jQuery, чтобы заставить его работать с наименьшим количеством суеты?

РЕДАКТИРОВАТЬ : Мое плохо.Когда я писал это изначально, я включал TABLE TD, имеющие проблему, а также DIV.Но я не осознавал, что взял свой тестовый код и переключился с DIV на TD, но мой CSS все еще говорил: float: left; clear: right.Когда я удалил это с TD, граница расширилась до полной высоты самого длинного столбца.Тем не менее, было бы хорошо узнать, как это сделать с DIVs, но кроссплатформенность от настольных браузеров, начиная с года IE7, вышла и выше.

Ответы [ 3 ]

2 голосов
/ 03 марта 2011

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

Надеюсь, это поможет.

1 голос
/ 03 марта 2011

Этот подход является относительно "безвкусным" - и это единственный подход, который я обнаружил, который работает правильно и не требует каких-либо значительных взломов.(также нет таблиц - только div и css).

Вы можете увидеть следующий пример в действии: здесь (jsFiddle)

HTML: 

<div class="colwrap">
    <div class="col1 content">
        <div class="col1 bg"></div>
        unde omnis iste natus error 
        sit voluptatem accusantium 
        doloremque laudantium
    </div>
    <div class="col2 content">
        <div class="col2 bg"></div>
        abcdefg hijklmnop
    </div>
</div>

CSS: 

.colwrap {
    position: relative;
    overflow: hidden;
}
.colwrap .content {
    float:left;
    overflow: hidden;
}
.colwrap .bg {
    position: absolute;
    height: 100%;
    z-index: -1;
}
.colwrap .col1 { width: 50px; }
.colwrap .col1.bg { background: blue; }

.colwrap .col2 { width: 50px; }
.colwrap .col2.bg { background: red; }

Заметки

  1. Единственный прием, который вам нужен, это то, что вам нужно разделить фон (или границу)) - любой визуальный элемент, которым вы хотите заполнить столбец - в отдельный div от содержимого.

  2. Ваши столбцы должны быть фиксированной ширины.ширина в процентах обычно не очень хорошо работает.

  3. Div содержимого попадает в оболочку, для которой установлено значение overflow:hidden.Таким образом, содержимое div "выталкивает" оболочку на всю высоту самого большого содержимого.

  4. Тогда фоновые div имеют значение position:absolute; height:100%;.Они автоматически наследуют позицию (вверху, слева) своих плавающих родителей, но высота вычисляется на основе следующего позиционированного родителя (не div с плавающим содержимым, а оболочка с position:relative;).Таким образом, фоновые элементы div заканчиваются именно там, где нам нужно.

  5. В элементах bg div также используется z-index:-1;, чтобы заставить их скрываться за содержимым.Это работает в webkit и FF, но может не работать корректно в IE (особенно в старых версиях).Если это не работает, проблема, вероятно, отрицательное число.Чтобы исправить все, что вам нужно сделать, это добавить дополнительную оболочку вокруг текста внутри содержимого div, затем установить z-index для bg и для вашей оболочки содержимого, чтобы все складывалось так, как вы хотите.(конечно, вы должны проверить это - потому что это может вообще не быть проблемой).

  6. Наконец, я отмечу, что этот же подход будет работать для столько столбцов, сколькоВы хотите - просто добавьте больше (.col3, .col4 и т. д.), как и col1 и col2, показанные выше.

1 голос
/ 03 марта 2011

Не могли бы вы предоставить URL для вашей страницы?BG изображения будут работать, если ваша разметка была определенным образом.Я хотел бы взглянуть на вашу страницу, чтобы увидеть, что вы пытаетесь сделать.

...