HTML implementa layout de 2 colunas, largura fixa à esquerda e adaptável à direita
Implementação um: <style> body, html{padding:0; margin:0;} // De acordo com o posicionamento CSS, use posicionamento flutuante ou absoluto para separar o elemento do bloco esquerdo do fluxo normal do documento e pode ser justaposto ao elemento do bloco direito div: nth-of -type(1){ float: left; //Use flutuante // posição: absoluto; //Use posicionamento absoluto // topo: 0; vermelho; } // [Elemento de nível de bloco, preenche automaticamente a largura do elemento pai por padrão, ocupando uma linha] // Atualmente: a largura do elemento de bloco direito = a largura do elemento pai div:nth-of-type(2){ // Define margin-left para a largura esquerda do elemento do bloco. margin-left: 300px; // Agora: a largura do elemento do bloco direito = a largura do elemento pai - margin-left height: 220px background: blue; div> <div >div2</div></html>1) Antes de definir a margem esquerda
2) Depois de definir a margem esquerda
Implementação dois: <style> body, html{padding:0; margin:0;} // De acordo com o posicionamento CSS, use posicionamento flutuante ou absoluto para separar o elemento de bloco à esquerda do fluxo normal do documento div:nth-of-type(1 ){ float : left; //Use flutuante // posição: absoluto; //Use posicionamento absoluto // topo: 0; FC é um fluxo de documentos comum (regular), um contexto de formatação, uma área de renderização na página e um conjunto de especificações de renderização. BFC é um contexto de formatação em nível de bloco. // Use o contexto de formatação em nível de bloco BFC para criar um contêiner independente e isolado div:nth-of-type(2){ // Altere o valor de overflow para não visível, acionando BFC overflow: hidden height: 220px background: blue; }</style><html> <div>div1</div> <div>div2</div></html>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.