How to draw a vertical line between two div tags in HTML-HTML Tutorial-php.cn

How to draw a vertical line between two div tags in HTML

青灯夜游

Release： 2018-10-08 17:17:58

forward

5059 people have browsed it

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

. When we draw a vertical line, we find that the label cannot be found. After searching for information on the Internet, it is generally recommended to use js. I was paranoid and wanted to use pure CSS, and finally found a solution. I will share my approach below.

How to draw a vertical line between two div tags in HTML

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>

Copy after login

Rendering:

How to draw a vertical line between two div tags in HTML

By the way, write down the ideas and key codes of js

How to draw a vertical line between two div tags in HTML

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";  
  }  
}

Copy after login

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!