Shulou(Shulou.com)06/01 Report--

This article mainly introduces HTML how to draw a vertical bar between the two div tags related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this HTML how to draw a vertical bar between the two div tags will have a harvest, let's take a look at it.

Add one more p to the two sub-p, and set the left (right) border to be visible, and use the principle of using padding-bottom | margin-bottom to offset the positive and negative values. For example, setting padding-bottom:1600px;margin-bottom:-1600px; can be understood as: the use of padding can support the outer label, but margin does not have to support the outer label. That is, when padding-bottom opens the height of the outer label, the outer label hides the excess height with overflow:hidden;, so that the height can be aligned with the highest column; while margin is about module layout, margin can offset the box opened by padding so that the layout can start from the content part.

Here is the code:

Body {

Margin-top:100px

Margin-left:200px

}

.mainp {

Width:900px

Padding:10px

Overflow:hidden;/* key * /

Border:1pxsolidblack

}

.leftp {

Float:left

Width:400px

Background-color:#CC6633

}

.rightp {

Float:right

Width:400px

Background-color:#CC66FF

}

.centerp {

Float:left

Width:50px

Border-right:1pxdashedblack

Padding-bottom:1600px;/* key * /

Margin-bottom:-1600px;/* key * /

}

Vertical line drawing method

Effect picture:

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

Compare which of the two p's height is higher. The goal can also be achieved by choosing to make the adjacent border of the high p visible.

Here is the code for js

Functionmyfun () {

Varp1=document.getElementById ("content")

Varp2=document.getElementById ("side")

Varh2=p1.offsetHeight

Varh3=p2.offsetHeight

If (H2 > h3) {

P1.style.borderRight= "1pxdashed#B6AEA3"

} else {

P2.style.borderLeft = "1pxdashed#B6AEA3"

}

}

This is the end of the article on "how to draw a vertical line between two div tags by HTML". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to draw a vertical bar between two div tags". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.