Artigo Introdução de wulin.com (www.vevb.com): CSS3+HTML5 NOTAS DE ESTUDO 4-CSS Layout-lar-largura de três colunas apenas se adapta.
No passado, ao fazer o layout de três colunas, o método mais comum e mais simples pode ser: usando o float+margem para implementá-lo. Na era do CSS3, poderíamos ter outro método da moda, que é o modelo de caixa no CSS3, com o código da seguinte forma:
Layout de três colunas CSS3 CSS3 Layout de três colunas MiddleleftrightO efeito de operação no Google Chrome é o seguinte:
Resumo: O atributo Box-Flex é usado principalmente aqui. Esse atributo permite que o recipiente filho divida a largura de acordo com certas regras em relação ao contêiner pai. Se os três recipientes infantis definirem o valor da caixa-flexão para 1, 2 e 3, respectivamente, os três recipientes infantis dividirão a largura de acordo com uma proporção de 1: 2: 3.
Obviamente, o contêiner pai deve ser definido como um modelo de caixa para ver o efeito, como exibição: -webkit-box; exibição: -moz-box;
No entanto, se você executar o código acima diretamente, não há problema no Chrome, mas quando se trata de Firefox, ele se torna o seguinte:
, isso é um bug do Firefox? Originalmente, as larguras nas laterais esquerda e direita eram fixas, mas as larguras no meio não tinham uma largura adaptativa. Depois de se comunicar com o autor de "O Guia de autoridade para HTML5 e CSS3", percebi que essa situação ocorre porque a largura do contêiner pai não está definida. Basta adicionar largura: 100% ao contêiner pai. . . Obrigado ao autor de "Guia de autoridade HTM5 e CSS3" ...