Em CSS, existem duas maneiras de implementar o layout de colunas. O primeiro método é utilizar o posicionamento absoluto (posicionamento absoluto) entre as quatro opções de posicionamento CSS (absoluto, estático, relativo e fixo), que pode remover um elemento do documento de sua posição original e reposicioná-lo em qualquer lugar que desejar. A segunda é usar o conceito float em CSS.
Posicionamento absoluto ou flutuação podem ser usados para obter efeitos de coluna. Os dois podem ser usados de forma independente ou combinados para se complementarem.
1. Posicionamento absoluto A vantagem do posicionamento absoluto é que podemos controlar com precisão a posição de qualquer elemento - não há adivinhação ou sorte envolvida. Como um elemento posicionado de forma absoluta é completamente removido do fluxo regular de documentos sem deixar rastros, ele não tem impacto sobre outros elementos.
Então, vamos tentar implementar o seguinte layout usando posicionamento absoluto.
Este é um layout de três colunas e está centralizado. Entre elas, a coluna A é a coluna de conteúdo principal e as colunas B e C são colunas laterais. Em primeiro lugar, não podemos usar o posicionamento absoluto diretamente para posicionar as três colunas A, B e C na posição central, porque a resolução do monitor de cada pessoa será diferente. O efeito de centralização do posicionamento em um monitor com resolução de 1024X768 será diferente. não funciona em outras resoluções. O efeito visto em um monitor de alta velocidade definitivamente não será centralizado.
Felizmente, existe um recurso extremamente útil no modelo de posicionamento absoluto, ou seja: se o contêiner de um elemento posicionado absolutamente também tiver sido posicionado, então os valores superior e esquerdo especificados pelo elemento não serão baseados no elemento raiz html do documento (também é o canto superior esquerdo da janela do navegador), mas o deslocamento será calculado com base no canto superior esquerdo do seu contêiner. Em outras palavras, isto é: o contêiner posicionado atuará como ponto de partida para o posicionamento absoluto de todos os elementos nele contidos.
Portanto, usando este recurso, adicionamos um contêiner D fora das colunas A, B e C, conforme mostrado abaixo:
Em seguida, centralizamos o contêiner D e adicionamos um atributo a ele: posição:relativo. Dessa forma, usamos o posicionamento absoluto para posicionar os valores superior e esquerdo de A, B e C. As posições de A, B. , e C será baseado no contêiner D. A posição do canto superior esquerdo é calculada, de modo que o efeito de centralização desejado de três colunas possa ser alcançado.
Porém, nosso layout comumente usado não é tão simples. Além de três colunas, também precisamos de um cabeçalho e um rodapé, conforme mostrado abaixo:
Neste momento, usar um layout posicionado de forma absoluta não funcionará, pois o elemento posicionado de forma absoluta será completamente removido do fluxo do documento. Neste momento, o rodapé ficará próximo ao cabeçalho e exibido abaixo do cabeçalho.
Se precisarmos usar o posicionamento absoluto, devemos saber antecipadamente a altura de cada uma das três colunas e depois posicionar o rodapé com base na coluna mais alta. Se o comprimento do texto em qualquer coluna não puder ser determinado, além de usar JavaScript, só podemos desistir da ideia de posicionamento absoluto e investir na adoção do layout flutuante.
2. Flutuante
A intenção original da flutuação é flutuar a imagem inserida no artigo para a esquerda ou direita, de modo que o texto abaixo da imagem a envolva automaticamente, de modo que não haja um grande espaço em branco à esquerda ou lado direito da imagem.
Embora a sintaxe da flutuação seja simples, não é tão fácil de dominar. Vamos dar um exemplo de como usar a flutuação no layout. Da mesma forma, vamos implementar um layout de três colunas com rodapé. Conforme mostrado abaixo:
Como usar float para conseguir tal efeito? Na verdade, é muito simples:
1. Defina a largura de E e centralize E.
2. Defina a largura de A, B e C e flutue A, B e C para a esquerda, respectivamente
. atributo para o rodapé. O que
precisa ser explicado é que o layout flutuante ainda segue o fluxo normal do documento, portanto, comparado ao posicionamento absoluto, a posição da declaração do elemento no arquivo de origem HTML é particularmente importante no posicionamento flutuante. Obviamente, a maneira mais simples de resolver esse problema é trocar a ordem de declaração da coluna esquerda e da coluna direita no arquivo de origem. No entanto, isso requer também maneiras de obter o mesmo layout. o uso de uma comparação Maneira obscura de usar valores de margem negativos. Em circunstâncias normais, as pessoas provavelmente optarão por trocar a ordem das declarações nas colunas esquerda e central do arquivo de origem.