Recentemente, quando eu estava desenhando uma interface, encontrei um requisito: desenhe uma linha vertical na interface, e a altura dessa linha vertical precisa ocupar automaticamente todo o div pai (ou seja, a altura dessa linha vertical é a mesma como a altura dos dois divs). O mais alto tem a mesma altura).
Normalmente desenhamos uma linha horizontal e apenas usamos a tag <hr>. Quando desenhamos uma linha vertical, descobrimos que a tag não pode ser encontrada. Após pesquisar informações na Internet, geralmente é recomendado o uso de js. Fiquei paranóico e queria usar CSS puro e finalmente encontrei uma solução. Compartilharei minha abordagem abaixo.
Adicione mais um div aos dois subdivs, defina a borda esquerda (direita) para ficar visível e use o princípio de usar valores positivos e negativos de padding-bottom|margin-bottom para compensar um ao outro. Por exemplo, configurando padding-bottom:1600px; margin-bottom:-1600px
; podemos entender isso como: padding pode ser usado para expandir o rótulo externo, mas margin não é usado para expandir o rótulo externo. Ou seja, quando padding-bottom é usado para expandir a altura do rótulo externo, o rótulo externo usa overflow: hidden para ocultar o excesso de altura, para que a altura possa ser alinhada com a coluna mais alta e a margem seja relacionada à coluna mais alta; layout do módulo e margem podem compensar o preenchimento A caixa esticada permite que o layout comece a partir da seção de conteúdo.
Aqui está o código:
body{ margin-top:100px; margin-left:200px; } .maindiv{ largura:900px; preenchimento:10px; :400px; cor de fundo:#CC6633; } .rightdiv{ float:right width:400px; background-color:#CC66FF; } .centerdiv{ float:left; margin-bottom:-1600px; } <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <head> <meta http-equiv=Content -Type content=text/html; charset=gb2312 /> <title>Método de desenho de linha vertical</title> <link href=../css/demo.css rel=stylesheet type=text/css /> </head> <body> <div class=maindiv> <div class=leftdiv><br><br><br><br><br><br></div> <div class=centerdiv></div> <div class=rightdiv><br><br><br><br><br><br><br></div> </div> </body> </html >
Renderização:
A propósito, anote as ideias e códigos-chave de js
Compare a altura de dois divs filhos, qual deles é mais alto. Você também pode atingir o objetivo optando por tornar visível a borda adjacente do div mais alto.
A seguir está o código de js
função minhafun(){ var div1=document.getElementById(conteúdo); var div2=document.getElementById(lado); var h1=div1.offsetHeight; borderRight=1px tracejado #B6AEA3; div2.style.borderLeft=1px tracejado #B6AEA3;Resumir
O texto acima é a introdução do editor sobre como desenhar uma linha vertical entre duas tags div em HTML. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!