HTML如何在两个div标签中间画一条竖线
这篇文章将为大家详细讲解有关HTML如何在两个div标签中间画一条竖线,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联公司是一家专业提供西平企业网站建设,专注与成都做网站、成都网站建设、H5响应式网站、小程序制作等业务。10年已为西平众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
在两个子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: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; /*关键*/ }竖线画法
效果图:
顺便写一下js的思路和关键代码
比较两个子p的高度哪一高。选择把高的那个p的相邻边框设为可见也可达到目的。
以下是js的代码
function myfun(){ var p1=document.getElementById("content"); var p2=document.getElementById("side"); var h2=p1.offsetHeight; var h3=p2.offsetHeight; if(h2>h3){ p1.style.borderRight="1px dashed #B6AEA3"; }else{ p2.style.borderLeft="1px dashed #B6AEA3"; } }
关于HTML如何在两个div标签中间画一条竖线就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
文章标题:HTML如何在两个div标签中间画一条竖线
文章来源:http://scyanting.com/article/giossg.html