В CSS существует два способа реализации макета столбцов. Первый метод — использовать абсолютное позиционирование (абсолютное позиционирование) среди четырех вариантов позиционирования CSS (абсолютное, статическое, относительное и фиксированное), что позволяет удалить элемент в документе из исходного положения и переместить его в любом месте. Второй — использовать концепцию float в CSS.
Для достижения эффекта столбца можно использовать абсолютное позиционирование или плавающее положение. Их можно использовать независимо или комбинировать вместе, дополняя друг друга.
1. Абсолютное позиционирование. Преимущество абсолютного позиционирования заключается в том, что мы можем точно контролировать положение любого элемента — здесь не нужно никаких догадок или удачи. Поскольку абсолютно позиционированный элемент полностью удаляется из обычного документооборота, не оставляя следов, он не оказывает никакого влияния на другие элементы.
Итак, давайте попробуем реализовать следующий макет, используя абсолютное позиционирование.
Это трехколоночный макет, расположенный по центру. Среди них столбец A является столбцом основного контента, а столбцы B и C — боковыми столбцами. Прежде всего, мы не можем напрямую использовать абсолютное позиционирование для размещения трех столбцов A, B и C в центральном положении, поскольку разрешение монитора каждого человека различно. Эффект центрирования позиционирования на мониторе с разрешением 1024X768 будет разным. не работает при других разрешениях. Эффект, видимый на высокоскоростном мониторе, точно не будет центрироваться. Как решить эту проблему?
К счастью, в модели абсолютного позиционирования есть чрезвычайно полезная функция, а именно: если контейнер абсолютно позиционированного элемента также был позиционирован, то верхнее и левое значения, указанные элементом, не будут основаны на корневом элементе. html документа (также является верхним левым углом окна браузера), но смещение будет рассчитываться на основе левого верхнего угла его контейнера. Другими словами, позиционированный контейнер будет выступать в качестве отправной точки для абсолютного позиционирования всех элементов в нем.
Поэтому, используя эту функцию, мы добавляем контейнер D вне столбцов A, B и C, как показано ниже:
Затем мы центрируем контейнер D и добавляем к нему атрибут: положение: относительное. Таким образом, мы используем абсолютное позиционирование для позиционирования верхнего и левого значений A, B и C. Позиции A, B. , а C будет основан на контейнере D. Положение верхнего левого угла рассчитывается так, чтобы можно было достичь желаемого эффекта центрирования трех столбцов.
Однако наш обычно используемый макет не так прост. Помимо трех столбцов нам также нужны верхний и нижний колонтитулы, как показано ниже:
В настоящее время использование абсолютно позиционированного макета не будет работать, поскольку абсолютно позиционированный элемент будет полностью удален из потока документов. В это время нижний колонтитул будет находиться рядом с заголовком и отображаться под заголовком.
Если нам нужно использовать абсолютное позиционирование, мы должны заранее знать высоту каждого из трех столбцов, а затем расположить нижний колонтитул на основе самого высокого столбца. Если длину текста в каком-либо столбце определить невозможно, помимо использования JavaScript, мы можем только отказаться от идеи абсолютного позиционирования и вместо этого инвестировать в использование плавающей разметки.
2. Плавающее.
Первоначальная цель плавающего размещения — сместить изображение, вставленное в статью, влево или вправо, чтобы текст под изображением автоматически обтекал его, чтобы не было большого пустого пространства слева или справа. правая часть изображения.
Хотя синтаксис плавающего элемента прост, освоить его не так-то просто. Давайте приведем пример того, как использовать плавающий формат для макета. Аналогично мы собираемся реализовать трехколоночный макет с нижним колонтитулом. Как показано ниже:
Как использовать float для достижения такого эффекта? На самом деле, это очень просто:
1. Установите ширину E и центр E.
2. Установите ширину A, B и C и переместите A, B и C влево соответственно.
3. Установите ясность. Атрибут для нижнего колонтитула. Необходимо
объяснить, что плавающий макет по-прежнему соответствует обычному потоку документа, поэтому по сравнению с абсолютным позиционированием позиция объявления элемента в исходном файле HTML особенно важна при плавающем позиционировании. Конечно, самый простой способ решить эту проблему — поменять порядок объявления левого и правого столбцов в исходном файле. Существуют также способы добиться того же макета без изменения порядка столбцов. использование сравнения Неясный способ использования отрицательных значений маржи. В обычных обстоятельствах люди, скорее всего, захотят поменять порядок объявлений в левом и среднем столбцах исходного файла.