В моем предыдущем уроке «Базовый макет девяти дворцов» я представил метод использования относительного и абсолютного позиционирования для создания базового макета девяти дворцов. Это метод, который больше соответствует инерционному мышлению людей. Вроде бы все в производственном процессе само собой разумеющееся. Однако из-за отвратительного паритетного BUG IE6 он стал немного недосягаем для такой компоновки. метод должен быть универсальным, т.к. большинство отечественных пользователей до сих пор используют IE6, и мы не можем из-за этого потерять этих пользователей.
На данный момент не существует лекарства от этой ошибки, и нет никаких хаков, которые можно было бы использовать. Единственный способ ее использовать — обойти. Другими словами, я хочу найти четыре угловых контейнера сетки из девяти клеток. Метод абсолютного позиционирования не может быть использован. Это серьезный удар, который полностью отменяет метод, использованный в моей предыдущей статье. заново.
Так какие же еще технологии могут спасти эту ОШИБКУ от тяжелого положения? Мы знаем, что если вы используете метод плавания слева и справа, вы можете точно сместить объект элемента, и этот метод также может избежать ОШИБКИ четности IE6. Хорошо, давайте воспользуемся этим.
Ключевые моменты и сложности в верстке
Структуру нашей новой модели мы по-прежнему строим по структуре таблицы, но на этот раз она будет отличаться от структуры предыдущей статьи. Ключевыми моментами и трудностями, на которые нам необходимо обратить внимание в этой модели, являются следующие два момента:
1. Значения ширины двух промежуточных контейнеров t_m и b_m должны быть процентным значением, в противном случае динамическое расширение всей сетки из девяти квадратов не может быть гарантировано влево и вправо, и оно не должно быть фиксированным значением пикселя. Его ширина равна общей ширине контейнера за вычетом суммы ширин двух угловых контейнеров в процентах. Формула расчета:
Ширина t_m (или b_m) = (общая ширина контейнера - (ширина контейнера в верхнем левом углу + ширина контейнера в верхнем правом углу)) / общая ширина контейнера
То есть ширина t_m или b_m не равна 100%. Однако ширина двух контейнеров t_l и t_r в реальных случаях обычно равна ширине изображения, поэтому обычно это фиксированное значение ширины, так что в те же три. В контейнере ширина с левой и правой стороны — фиксированное значение, а вот середина требует процента, а общая ширина этих трёх контейнеров должна в сумме составлять 100%. Что нам делать?
Здесь мы используем относительно безопасный метод, чтобы средний контейнер достиг идеального процента ширины:
Мы можем использовать контейнер DIV и установить его отступы: 0 10px не задавать его ширину. По умолчанию его ширина равна 100%. Поскольку значения левого и правого заполнения установлены, внутренняя ширина является идеальным значением ширины t_m, которое мы хотим, поэтому мы определяем контейнер внутри него, а ширина этого подконтейнера устанавливается равной 100%. Цвет фона этого подконтейнера может быть установлен в виде горизонтально расположенного фонового изображения слева и справа. Этот подконтейнер — верхний контейнер, который мы собираемся использовать. Он соответствует нашим особым требованиям к значениям ширины.
Таким образом, структуру t_m можно преобразовать в следующую структуру:
<div class="top"><span class="t_m"></span></div>
Однако это определение вызовет другую проблему. Эта проблема существует в браузерах ниже IE7. Поскольку мы определяем заполнение, оно также будет генерировать левые и правые внутренние патчи в среднем слое ниже. Это немного неясно. Да: почему это влияет. IE7?
Таким образом, решение состоит в том, чтобы использовать HACK-трюк для IE6 и IE7:
.b_l{margin-left:0px;+margin-left:-10px;_margin-left:-10px;}
.b_r{поле справа: 0 пикселей; + поле справа: -10 пикселей; _ поле справа: -10 пикселей;}
Это предложение устанавливает разные значения смещения для трех браузеров и смещает b_l и b_r влево и вправо до указанной позиции.
2. Значения высоты двух контейнеров b_l и b_r должны быть одинаковыми, чтобы они могли располагать цвет фона вертикально вниз. Таким образом, когда высота содержимого в средней области основного содержимого (контекста) изменяется, цвет фона с обеих сторон всегда может сохранять ту же высоту, что и основная область содержимого (контекст). То есть они могут свободно изменять свою высоту в зависимости от высоты тела контента.
Для решения этой проблемы мы можем использовать метод нескольких столбцов одинаковой высоты, который часто используется в повседневной работе. Этот метод использует комбинацию внутренних патчей и отрицательных внешних патчей для достижения одинаковой высоты для нескольких столбцов:
.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}
Мы устанавливаем значение отступа нижнего внутреннего участка m_l и m_r на относительно большое значение. Например, я установил для них значение 30000 пикселей (вы можете установить любое значение, которое вы хотите). не превышать это значение высоты. Затем установите для нижнего внешнего патча (margin-bottom) то же отрицательное значение, что и для нижнего внутреннего патча (padding-bottom), верните его в исходное положение и установите для общего контейнера (поля) значение overflow:hidden;, Отрежьте лишнюю высоту, чтобы обе колонны были одинаковой высоты.
После решения двух вышеперечисленных непростых задач, остальное становится простым и приятным! [Вырезанная страница]
структурный слой
Теперь мы настроили слой структуры на основе предыдущего случая, и он стал следующей структурой:
Ниже приводится цитируемое содержание: <div class="box"> <!--Вторая строка — средняя область содержимого*/--> <!--Третья строка — внизу*/--> |
слой стиля
Вот основные настройки стиля:
Ниже приводится цитируемое содержание: /*Общий контейнер*/ .box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;} /*Лучший стиль*/ /*Средний стиль*/ /*Нижний стиль*/ |
Из восьми изображений можно сделать красивую сетку из девяти квадратов. Посмотрите, как оно идеально.
Эта модель была протестирована в следующих браузерах:
IE5.5, IE6, IE7, IE8, FF3, TT, Maxthon2.1.5, Opera9.6, Safari4.0, Chrome2.0.
Ниже приводится цитируемое содержание: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Ссылка на эту статью: http://www.blueidea.com/tech/web/2009/6805.asp.