Explicação detalhada da solução de layout html adaptativo médio fixo com largura esquerda e direita

Este artigo apresenta uma explicação detalhada da solução de layout HTML adaptável com largura média fixa à esquerda e à direita e a compartilha com todos, da seguinte maneira:

A estrutura HTML é a seguinte

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Tenha cuidado aqui primeiro O os elementos flutuantes esquerdo e direito são renderizados antes do elemento do meio ser renderizado. Depois que o elemento for flutuado, os elementos restantes no nível do bloco irmão ocuparão a largura do elemento pai <style> .box{ height:200px } .left{ float:left } .right{ float:right; ;largura:300px;

A estrutura HTML é a seguinte

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Igual ao layout flutuante, primeiro renderize os elementos esquerdo e direito para que fiquem posicionados nas extremidades esquerda e direita do elemento pai, e os elementos intermediários restantes ocupem a largura restante do elemento pai. <estilo> .box{ posição: relativa } .esquerda{ posição: largura absoluta: 100px; margem: 0 100px; ; fundo: vermelho;

Colocar o elemento pai display:table e o elemento filho display:table-cell irá transformá-lo em um bloco embutido.

A vantagem deste layout é a boa compatibilidade.

 <div class=box> <div class=left> esquerda </div> <div class=center> centro </div> <div class=right> direita </div></div><style> .box{ exibição : tabela; largura: 100%; } .left{ display: table-cell } .center{ largura: 100%; fundo: vermelho;

Exibição do elemento pai: os elementos filhos flexíveis serão todos organizados em uma linha.

A largura de flex:n no elemento filho será a largura do elemento pai/n

Por exemplo, flex:1, a largura é igual à altura do elemento pai.

A desvantagem do layout elástico é que sua compatibilidade não é alta. Atualmente, o navegador IE não pode usar o layout elástico.

 <div class=box> <div class=left> esquerda </div> <div class=center> centro </div> <div class=right> direita </div></div><style> .box{ exibição : flex; largura: 100%; } .esquerda{ largura: 100px; esquerda: 0;

Exibição do elemento pai: grade;

grid-templatecolumns:100px auto 100px;

Em ordem, a largura do primeiro elemento filho é 100px, o segundo é adaptativo e o terceiro é 100px;

A vantagem do layout de grade é que ele é extremamente simples e determinado diretamente pelo estilo do elemento pai. A desvantagem é que sua compatibilidade não é alta.

 <div class=box> <div class=left> esquerda </div> <div class=center> centro </div> <div class=right> direita </div></div><style> .box{ exibição : grade; colunas de modelo de grade: 100px automático 100px largura: 100%;

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.