Home > Article > Web Front-end > How to draw a vertical line between two div tags in HTML
Recently, the project manager gave me a task, which required me to draw a vertical line in the interface, and the height of this vertical line needed to automatically occupy the entire parent page. I checked the relevant information on the Internet and finally got it. The editor will share the solution below. Friends who need it can refer to it.
Recently, when I was drawing an interface, I encountered a requirement: draw a vertical line in the interface, and the height of this vertical line needs to automatically occupy the entire parent p (that is, the height of this vertical line is the same as the height of the two p's). The higher one is the same height).
Usually we draw a horizontal line and just use the label
Add one more p to the two sub-p's, set the left (right) border to be visible, and use the principle of using padding-bottom|margin-bottom's positive and negative values to offset each other. For example, setting padding-bottom:1600px; margin-bottom:-1600px
; we can understand that: padding can be used to expand the outer label but margin is not used to expand the outer label. That is, when padding-bottom is used to expand the height of the outer label, the outer label uses overflow:hidden; to hide the excess height, so that the height can be aligned with the highest column; and margin is related to the module layout, and margin can offset the padding The stretched box allows the layout to start from the content section.
Here is the code:
body{ margin-top:100px; margin-left:200px; } .mainp{ width:900px; padding:10px; overflow:hidden; /*关键*/ border:1px solid black; } .leftp{ float:left; width:400px; background-color:#CC6633; } .rightp{ float:right; width:400px; background-color:#CC66FF; } .centerp{ float:left; width:50px; border-right: 1px dashed black; padding-bottom:1600px; /*关键*/ 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>竖线画法</title> <link href="../css/demo.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="mainp"> <p class="leftp"><br><br><br><br><br><br></p> <p class="centerp"></p> <p class="rightp"><br><br><br><br><br><br><br></p> </p> </body> </html>
Rendering:
By the way, write down the ideas and key codes of js
Compare the heights of the two sub-p's which one is higher. You can also achieve the goal by choosing to make the adjacent border of the taller p visible.
The following is the code of js
function myfun(){ var p1=document.getElementById("content"); var p2=document.getElementById("side"); var h1=p1.offsetHeight; var h2=p2.offsetHeight; if(h1>h2){ p1.style.borderRight="1px dashed #B6AEA3"; }else{ p2.style.borderLeft="1px dashed #B6AEA3"; } }
Summarize
The above is the editor's introduction to how to draw a vertical line between two p tags in HTML. I hope it will be helpful to you!
The above is the detailed content of How to draw a vertical line between two div tags in HTML. For more information, please follow other related articles on the PHP Chinese website!