怎么使用HTML在两个div标签中间画一条竖线 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍怎么使用HTML在两个div标签中间画一条竖线,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

近日在画一个界面的时候,遇到一个需求:在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父p(即这条竖线的高度和两个p中较高的一个等高)。

往常我们画一条横线直接用标签& lt; hr>即可,当画一条竖线的时候发现找不到标签。在网上查找了一下资料,大致推荐用js来做。小弟比较偏执想用纯css来做,最终找到了解决方法、下面我就来分享一下我的做法。

在两个子p中加多一个p,并设置左(右)边框为可见,并且利用利用padding-bottom | margin-bottom正负值相抵消的原理,例如设置,,<代码> padding-bottom: 1600 px;margin-bottom: -1600 px>

以下是代码:

身体{ 　　margin-top: 100 px; 　　margin-left: 200 px; 　　} 　　.mainp { 　　宽度:900 px; 　　填充:10 px; 　　溢出:隐藏;/*关键*/边界:1 px固体黑色; 　　} 　　.leftp { 　　浮:左; 　　宽度:400 px; 　　background - color: # CC6633; 　　} 　　.rightp { 　　浮:正确; 　　宽度:400 px; 　　background - color: # CC66FF; 　　} 　　.centerp { 　　浮:左; 　　宽度:50 px; 　　边境:1 px冲黑; 　　padding-bottom: 1600 px;/*关键*/margin-bottom: -1600 px;/*关键*/} 　　　　& lt; !DOCTYPE html公众“-//W3C XHTML 1.0//DTD//EN"过渡;“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"比; 　　& lt; html xmlns=癶ttp://www.w3.org/1999/xhtml"比; 　　& lt; head> 　　& lt;元http-equiv=癈ontent-Type"内容=皌ext/html;charset=gb2312"/比; 　　& lt; title>竖线画法& lt;/title> 　　& lt;链接https://www.yisu.com/zixun/href=" . ./css/demo.css " rel="样式表" type=" text/css "/> 　　

　　身体　　

效果图:

怎么使用html在两个div标签中间画一条竖线

顺便写一下js的思路和关键代码

怎么使用html在两个div标签中间画一条竖线

比较两个子p的高度哪一高。选择把高的那个p的相邻边框设为可见也可达到目的。

以下是js的代码

函数myfun () {
　　var p1=. getelementbyid (“content");
　　var p2=. getelementbyid (“side");
　　var h2=p1.offsetHeight;
　　var h3=p2.offsetHeight;
　　如果(h2> h3) {
　　p1.style.borderRight=? px冲# B6AEA3";
　　其他}{
　　p2.style.borderLeft=? px冲# B6AEA3";
　　}
　　}

以上是怎么使用HTML在两个div标签中间画一条竖线的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!