HTML怎么在两个div标签中间画一条竖线

这篇文章主要介绍了HTML怎么在两个div标签中间画一条竖线的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇HTML怎么在两个div标签中间画一条竖线文章都会有所收获，下面我们一起来看看吧。

　　在两个子p中加多一个p，并设置左（右）边框为可见，并且利用利用padding-bottom|margin-bottom正负值相抵消的原理。例如设置padding-bottom:1600px;margin-bottom:-1600px;我们可以理解为：运用的是padding可以撑开外层标签而margin不用来撑开外层标签。即当padding-bottom时撑开外层标签的高度,外层标签用overflow:hidden;隐藏掉多余的高，这样可以让高度与最高的那一栏对齐；而margin关乎模块布局，margin可以抵消掉padding撑开的盒子使布局能够从内容部分开始。

　　以下是代码：

　　body{

　　margin-top:100px;

　　margin-left:200px;

　　}

　　.mainp{

　　width:900px;

　　padding:10px;

　　overflow:hidden;/*关键*/

　　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;/*关键*/

　　margin-bottom:-1600px;/*关键*/

　　}

　　

　　效果图：

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

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

　　以下是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";

　　}

　　}

关于"HTML怎么在两个div标签中间画一条竖线"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"HTML怎么在两个div标签中间画一条竖线"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。