Usando o posicionamento flutuante, a largura fixa e a adaptabilidade de uma coluna para várias colunas podem ser basicamente concluídas simplesmente, incluindo a largura fixa de três colunas. Aqui apresentamos um novo requisito, na esperança de ter um layout de três colunas, onde a coluna esquerda requer uma largura fixa e é exibida à esquerda, a coluna direita requer uma largura fixa e é exibida à direita e o meio A coluna precisa estar na coluna esquerda e na coluna direita. Isso apresenta um novo requisito para o layout e simplesmente usar o atributo FLOAT e o atributo percentual não pode ser alcançado Usado para a coluna do meio para largura, ele usará a largura da janela do navegador, em vez do espaçamento intermediário entre as colunas esquerda e direita, por isso precisamos repensar esse problema. #Layout { Se #Layout usa a posição: Absoluto; A margem esquerda é 0px. . Dessa maneira, a coluna esquerda será exibida no lado esquerdo da borda esquerda, enquanto a coluna direita será exibida no lado direito por direito: 0px; Para #Center, não precisamos mais definir seu método flutuante. A distância esquerda e direita apenas permite que o #Left e o #Right sejam exibidos neste espaço, atingindo assim os requisitos.
Posicionamento absoluto
Antes de iniciar um layout de três colunas, é necessário entender um novo método de posicionamento - posicionamento absoluto. O método de posicionamento flutuante anterior é ajustado principalmente pelo navegador de acordo com o conteúdo do objeto. O posicionamento e o posicionamento absoluto são alcançados usando o atributo de posição.
Posição usada para definir os valores disponíveis para posicionar o objeto: estático/absoluto/relativo
Para todos os objetos da página, a propriedade de posição padrão é estática. Se você definir o objeto para a posição: absoluto, o objeto será separado do fluxo de documentos e reposicionado de acordo com o local de toda a página. Ao usar esta propriedade, você pode usar o topo, direito, inferior, esquerdo, ou seja, o valor da distância das quatro direções da parte superior, direita, inferior e esquerda para determinar a posição específica do objeto.
Posição: Absoluto;
topo: 20px;
Esquerda: 0px;
}
Nota: Se um objeto estiver definido como Posição: Absoluto; Posicionamento absoluto, o objeto flutua na página da web como uma camada.
Após o posicionamento absolutamente, o objeto não será mais considerado com o relacionamento flutuante na página.
Nesse caso, o uso de posicionamento absoluto pode resolver o problema que levantamos bem. Da mesma forma, usamos 3 divs para formar nossas três estruturas de coluna:
#esquerda {
Background-Color: #e8f5fe;
borda: 1px Solid #A9C9E2;
Altura: 400px;
Largura: 200px;
Posição: Absoluto;
Top: 0px;
Esquerda: 0px;
}
#certo {
Background-Color: #ffe7f4;
borda: 1px sólido #f9b3d5;
Altura: 400px;
Largura: 200px;
Posição: Absoluto;
Top: 0px;
Direita: 0px;
}
#Center {
Background-Color: #f2fddb;
borda: 1px sólido #a5cf3d;
Altura: 400px;
Margem-direita: 202px;
margem-esquerda: 202px;
}