Многие веб-дизайнеры любят размещать два или более контейнера рядом на одинаковой высоте и отображать содержимое каждого контейнера внутри, точно так же, как ячейки в классической компоновке таблицы, которые управляют положением нескольких столбцов. Им также нравится удобство контейнеров. Содержимое отображается по центру или с выравниванием по верхнему краю.
Но вам не нравится использовать таблицы для его реализации, так что же вам делать? Существует много способов реализовать это, в том числе реализация на основе визуальных иллюзий, использование JS-контроля для выравнивания высот, а также использование метода сокрытия переполненной части контейнера и объединения отрицательной нижней границы столбца и положительной внутренней границы. патч для решения проблемы одинаковой высоты столбца.
На самом деле, существует простой метод, которого можно достичь, используя display:table, display:table-row и display:table-cell, а контейнеры с небольшой высотой адаптируются к контейнерам с относительно большой высотой, но IE не поддерживает этот атрибут на данный момент мы не виним в IE, я верю, что в будущем он улучшится. Вот я сделал модель.
Давайте сначала посмотрим на структуру xhtml:
| ＜класс div="equal"＞ ＜класс div="row"＞ ＜div class="one"＞＜/div＞ ＜div class="two"＞＜/div＞ ＜div class="three"＞＜/div＞ ＜/дел＞ ＜/дел＞ |
Это очень просто понять без пояснений, но вот структура таблицы, она очень похожа?
| <таблица> ＜тр＞ ＜тд＞＜/тд＞ ＜тд＞＜/тд＞ ＜тд＞＜/тд＞ ＜/тр＞ ＜/таблица＞ |
Вот CSS:
равный { } |
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 после тестирования прекрасно отображается.