HTML如何在两个div标签中间画一条竖线

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

HTML如何在两个div标签中间画⼀条竖线
近⽇在画⼀个界⾯的时候,遇到⼀个需求:在界⾯当中画⼀条竖线,且这条竖线在⾼度上需要⾃动占满整个⽗div(即这条竖线的⾼度和两个div中较⾼的⼀个等⾼)。

往常我们画⼀条横线直接⽤标签<hr>即可,当画⼀条竖线的时候发现找不到标签。

在⽹上查找了⼀下资料,⼤致推荐⽤js来做。

⼩弟⽐较偏执想⽤纯css来做,最终找到了解决⽅法,下⾯我就来分享⼀下我的做法。

在两个⼦div中加多⼀个div,并设置左(右)边框为可见,并且利⽤利⽤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;
}
.maindiv{
width:900px;
padding:10px;
overflow:hidden; /*关键*/
border:1px solid black;
}
.leftdiv{
float:left;
width:400px;
background-color:#CC6633;
}
.rightdiv{
float:right;
width:400px;
background-color:#CC66FF;
}
.centerdiv{
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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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>
<div class="maindiv">
<div class="leftdiv"><br><br><br><br><br><br></div>
<div class="centerdiv"></div>
<div class="rightdiv"><br><br><br><br><br><br><br></div>
</div>
</body>
</html>
效果图:
顺便写⼀下js的思路和关键代码
⽐较两个⼦div的⾼度哪⼀⾼。

选择把⾼的那个div的相邻边框设为可见也可达到⽬的。

以下是js的代码
function myfun(){
var div1=document.getElementById("content");
var div2=document.getElementById("side");
var h1=div1.offsetHeight;
var h2=div2.offsetHeight;
if(h1>h2){
div1.style.borderRight="1px dashed #B6AEA3";
}else{
div2.style.borderLeft="1px dashed #B6AEA3";
}
}
总结
以上所述是⼩编给⼤家介绍的HTML如何在两个div标签中间画⼀条竖线,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。

在此也⾮常感谢⼤家对⽹站的⽀持!。

相关文档
最新文档