Recientemente, cuando estaba dibujando una interfaz, encontré un requisito: dibujar una línea vertical en la interfaz, y la altura de esta línea vertical debe ocupar automáticamente todo el div principal (es decir, la altura de esta línea vertical es la misma como la altura de los dos divs). El más alto tiene la misma altura).
Por lo general, dibujamos una línea horizontal y solo usamos la etiqueta <hr>. Cuando dibujamos una línea vertical, encontramos que no se puede encontrar la etiqueta. Después de buscar información en Internet, generalmente se recomienda utilizar js. Estaba paranoico y quería usar CSS puro, y finalmente encontré una solución. Compartiré mi enfoque a continuación.
Agregue un div más a los dos subdivs, configure el borde izquierdo (derecho) para que sea visible y use el principio de usar los valores positivos y negativos de padding-bottom|margin-bottom para compensarse entre sí. Por ejemplo, configurando padding-bottom:1600px; margin-bottom:-1600px ; podemos entenderlo como: el relleno se puede usar para expandir la etiqueta exterior pero el margen no se usa para expandir la etiqueta exterior. Es decir, cuando se usa padding-bottom para expandir la altura de la etiqueta exterior, la etiqueta exterior usa overflow: oculto para ocultar el exceso de altura, de modo que la altura se pueda alinear con la columna más alta y el margen esté relacionado con la altura; El diseño del módulo y el margen pueden compensar el relleno. El cuadro extendido permite que el diseño comience desde la sección de contenido.
Aquí está el código:
cuerpo{ margen superior:100px; margen izquierdo:200px; } .maindiv{ ancho:900px; relleno:hidden /*key*/ borde:1px negro sólido; :400px; color de fondo:#CC6633; } .rightdiv{ float:right ancho:400px; color de fondo:#CC66FF; } .centerdiv{ float:left; ancho:50px; borde derecho: 1px discontinuo negro; padding-bottom:1600px /*key*/ margin-bottom:-1600px; } <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transicional//ES http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www.w3.org/1999/xhtml> <cabeza> <meta http-equiv=Contenido -Type content=text/html; charset=gb2312 /> <title>Método de dibujo de líneas verticales</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 >Representación:
Por cierto, escribe las ideas y códigos clave de js.
Compare la altura de dos divs secundarios, cuál es más alto. También puedes lograr el objetivo eligiendo hacer visible el borde adyacente del div más alto.
El siguiente es el código de js.
función myfun(){ var div1=document.getElementById(content); var div2=document.getElementById(side); var h1=div1.offsetHeight; var h2=div2.offsetHeight; borderRight=1px discontinuo #B6AEA3 }else{ div2.style.borderLeft=1px discontinuo #B6AEA3; ResumirLo anterior es la introducción del editor sobre cómo dibujar una línea vertical entre dos etiquetas div en HTML. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!