A compatibilidade do navegador sempre foi um problema comum no layout do CSS, e os iniciantes também chegaram a muitos mal -entendidos.
Esses dois métodos têm as seguintes vantagens:
1. Não há necessidade de usar hack
2. Simples e eficaz, você pode fazer isso de relance
3. Layout hierárquico e modular
4. O código é mais razoável e mais fácil de identificar
Método 1: Resolva desalinhamento flutuante causado pela adição de espaçamento interno e externo
Geralmente, precisamos usar o Float para flutuar quando o layout de várias colunas.
Para alcançar esse efeito, adicionaremos a margem para fazer a coluna diretamente à distância e adicionar a borda, além de preenchimento para que o texto interno não fique próximo ao quadro. Mas uma situação inesperada aconteceu.
Na terceira coluna, corra para o fundo. Este não é o efeito que você deseja. Então vamos analisá -lo. Siga a ideia geral. A largura geral é de 800px, a coluna esquerda é 200, o meio de 400 e a coluna direita é 200, que parece boa, mas deve haver espaçamento entre essas colunas, então você precisa alterá -lo: coluna esquerda 190, 400 médias, e coluna certa 190. Está tudo bem?
Mas, por uma boa aparência, você acrescentou fronteiras. No entanto, o quadro aumentará a largura após o esquecimento da borda. 168, para não ser desalinhado. Mas você não acha isso um pouco complicado? Haverá uma diferença na exibição de alguns navegadores para este layout.
OK, então deixe -me dizer meu método. De acordo com a hierarquia, separo o layout e a tela. O layout significa adicionar no máximo um espaçamento externo, além de largura e flutuação, por isso será mais fácil para mim calcular. Em seguida, adicionamos uma div na coluna do layout para exibir a borda, o espaçamento interno e externo, etc. Você não precisa definir a largura, pode se adaptar. Para facilitar sua memória, improvisei um poema: a largura fixa deve estar flutuando, sem fronteiras ou remendos, coloco uma divindora e definir o estilo para funcionar!
Método 2: Resolva os elementos flutuantes internos da camada externa
Para criar um catálogo de produtos ou álbum de imagens, usamos UL ou N Divs para flutuar.
Mas as coisas foram contra minhas expectativas.
A solução para isso é realmente muito simples.
1. Você pode adicionar um flutuador: esquerda;
2. Outro método é colocar uma div para limpar a flutuação no final após o término da bóia.
3. Adicione a altura ou largura à camada externa.