Se quisermos adicionar uma linha de rodapé no final do layout de 3 colunas para colocar informações como direitos autorais. Encontrei o problema de ter que alinhar a parte inferior de 3 colunas. No layout da tabela, usamos o método de aninhar tabelas grandes em tabelas pequenas, que podem facilmente alinhar as três colunas com o layout div, as três colunas estão espalhadas independentemente e o conteúdo tem alturas diferentes, dificultando o alinhamento; Na verdade, podemos aninhar divs completamente e colocar três colunas em um DIV para obter o alinhamento inferior. A seguir está um exemplo de implementação (uma caixa de fundo branco simula uma página):
Corpo
O código principal desta página de exemplo é o seguinte:
<div id="header"></div>
<div id="caixa principal">
<div id="menu"></div>
<div id="barra lateral"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
As folhas de estilo específicas estão escritas nas seções correspondentes. O ponto principal é que a camada #mainbox está aninhada em três camadas: #menu, #barra lateral e #content. Quando o conteúdo de #content aumenta, a altura de #content aumenta, e a altura de #mainbox também se expande, e a camada #footer desce automaticamente. Isso atinge um alto grau de adaptabilidade.
Vale ressaltar também que #menu e #content estão flutuando no lado direito da página "FLOAT: right;", #sidebar está flutuando no lado esquerdo da camada #menu "FLOAT: left;", este é o posicionamento do método flutuante, e você também pode usar o posicionamento absoluto é usado para obter esse efeito.
Outro problema desse método é que o fundo da barra lateral #sidebar não pode ser 100%. A solução geral é preenchê-lo com a cor de fundo do corpo. (A cor de fundo de #mainbox não pode ser usada porque a cor de fundo de #mainbox é inválida em navegadores como o Mozilla.)
Ok, a estrutura principal foi construída, o trabalho restante é apenas adicionar tijolos e telhas. Se você quiser experimentar outros layouts, recomendo a leitura dos seguintes artigos:
16 exemplos de layout CSS
onestab: demonstração de layout composto de três colunas
onestab: layout de três colunas livremente extensível
