Ниже приводится то, что я перевел. Это свободный перевод, основанный на моем понимании статьи. Пожалуйста, не придирайтесь к переводу. Моя цель — просто передать эти навыки CSS.
Многие веб-дизайнеры любят размещать два или более контейнера рядом на одинаковой высоте и отображать содержимое каждого контейнера внутри, точно так же, как ячейки в классической компоновке таблицы, которые управляют положением нескольких столбцов. Им также нравится удобство контейнеров. Содержимое отображается по центру или с выравниванием по верхнему краю.
Но вам не нравится использовать таблицы для его реализации, так что же вам делать? Существует множество способов его реализации, в том числе реализация на основе визуальных иллюзий, использование JS-контроля для выравнивания высот, а также использование метода сокрытия переполненной части контейнера и объединения отрицательной нижней границы столбца и положительной внутренней границы. патч для решения проблемы одинаковой высоты столбца.
На самом деле, существует простой метод, которого можно достичь, используя display:table, display:table-row и display:table-cell, а контейнеры с небольшой высотой адаптируются к контейнерам с относительно большой высотой, но IE не поддерживает на данный момент мы не виним IE, я верю, что в будущем ситуация улучшится. Вот я сделал модель.
Сначала взгляните на структуру xhtml:
<класс div=равно>
<класс div=строка>
<div class=one></div>
<div class=two></div>
<div class=three></div>
</div>
</div>
Это очень просто понять без пояснений, но вот структура таблицы, она очень похожа?
<таблица>
<тр>
<тд></тд>
<тд></тд>
<тд></тд>
</tr>
</таблица>
Вот CSS:
.равный {
дисплей: стол;
граница-коллапс:отдельная;
}
.ряд {
отображение: таблица-строка;
}
.row div {
дисплей: таблица-ячейка;
}
.row .one {
ширина: 200 пикселей;
}
.строка .два {
ширина: 200 пикселей;
}
.строка .три {
}
объяснять:1.dispaly:table; Пусть Layer.equal отображается как таблица элементов уровня блока, то есть обрабатывайте его как таблицу.
2.border-collapse:separate; Граница независима, как и до объединения ячеек таблицы.
3.display:table-row отображает .row как строку таблицы tr;
4.display:table-cell отображает подчиненный элемент div .row как ячейку таблицы td;
5. Затем определите ширину
Border-spacing:10px; здесь также используется для разделения нескольких блоков. Как указано выше, он не может нормально отображаться в IE, но есть: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8. b, а Netscape 7.1 после тестирования прекрасно отображается.