exemplo de layout css: método de layout de página da web

Muitos web designers gostam de colocar dois ou mais contêineres lado a lado em alturas iguais e exibir o conteúdo de cada contêiner dentro, assim como as células em um layout de tabela clássico que controla as posições de várias colunas. O conteúdo é exibido centralizado ou alinhado na parte superior.

Mas você não gosta de usar tabelas para implementá-lo, então o que deve fazer? Há muitas maneiras de implementá-lo, incluindo implementá-lo com base em ilusões visuais, usando o controle JS para igualar as alturas e usando um método para ocultar a parte de estouro do contêiner e combinar o limite inferior negativo da coluna e o interno positivo patch para resolver o problema da mesma altura de coluna.

Na verdade, existe um método simples, que pode ser alcançado usando display:table, display:table-row e display:table-cell, e contêineres com alturas pequenas se adaptarão àqueles com alturas relativamente altas, mas o IE não suporta este atributo. Não culpamos o IE por enquanto, acredito que irá melhorar no futuro. Aqui fiz um modelo.

Vejamos primeiro a estrutura do xhtml:

É muito simples de entender sem explicação, mas aqui está uma estrutura de tabela, é muito parecida?

Aqui está o css:

1.dispaly:table; Deixe layer.equal ser exibido como uma tabela de elementos em nível de bloco, ou seja, trate-o como uma tabela
2.border-collapse:separate A borda é independente, assim como antes da tabela mesclar células.
3.display:table-row; exibe .row como linha da tabela tr;
4.display:table-cell exibe o div subordinado de .row como célula da tabela td;
5. Depois defina a largura

Border-spacing:10px; também é usado aqui para distinguir várias caixas. Como mencionado acima, não pode ser exibido normalmente no IE, mas é: Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8. b, e Netscape 7.1 podem ser exibidos perfeitamente após o teste.