O que se segue é o que traduzi. É uma tradução gratuita baseada na minha compreensão do artigo. Não encontre falhas na tradução. Meu objetivo é apenas transmitir essa habilidade em CSS.
Muitos web designers gostam de colocar dois ou mais contêineres lado a lado com altura igual e exibir o conteúdo de cada contêiner dentro, assim como as células no layout de tabela clássico controlam a posição de várias colunas. Eles também gostam que o conteúdo do contêiner seja exibido centralizado. ou alinhado superiormente.
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:
<div classe = igual>
<div classe=linha>
<div classe=um></div>
<div class=dois></div>
<div class=três></div>
</div>
</div>
É muito simples de entender sem explicação, mas aqui está uma estrutura de tabela, é muito parecida?
<tabela>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tabela>
Aqui está o css:
.igual {
exibição: mesa;
colapso da borda: separado;
}
.linha {
exibição: linha da tabela;
}
.linha div {
display: célula-tabela;
}
.linha .um {
largura:200px;
}
.linha .dois {
largura:200px;
}
.linha .três {
}
explicar: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.