设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 76|回复: 15

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

[复制链接]

1

主题

50

回帖

121

积分

注册会员

积分
121
发表于 2024-4-20 10:32:06 | 显示全部楼层 |阅读模式
近日在画一个界面的时候,遇到一个需求:在界面当中画一条竖线,且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。
  往常我们画一条横线直接用标签<hr>即可,当画一条竖线的时候发现找不到标签。在网上查找了一下资料,大致推荐用js来做。小弟比较偏执想用纯css来做,最终找到了解决方法,下面我就来分享一下我的做法。

  在两个子div中加多一个div,并设置左(右)边框为可见,并且利用利用padding-bottom|margin-bottom正负值相抵消的原理。例如设置   
  1. padding-bottom:1600px; margin-bottom:-1600px
复制代码
;我们可以理解为:运用的是padding可以撑开外层标签而margin不用来撑开外层标签。即当padding-bottom时撑开外层标签的高度,外层标签用overflow:hidden;隐藏掉多余的高,这样可以让高度与最高的那一栏对齐;而margin关乎模块布局,margin可以抵消掉padding撑开的盒子使布局能够从内容部分开始。
以下是代码:
  1. body{  
  2.     margin-top:100px;  
  3.     margin-left:200px;  
  4. }  
  5. .maindiv{  
  6.     width:900px;  
  7.     padding:10px;  
  8.     overflow:hidden; /*关键*/  
  9.     border:1px solid black;  
  10. }  
  11. .leftdiv{  
  12.     float:left;  
  13.     width:400px;  
  14.     background-color:#CC6633;  
  15. }  
  16. .rightdiv{  
  17.     float:right;  
  18.     width:400px;  
  19.     background-color:#CC66FF;  
  20. }  
  21. .centerdiv{  
  22.     float:left;  
  23.     width:50px;  
  24.     border-right: 1px dashed black;  
  25.     padding-bottom:1600px;  /*关键*/  
  26.     margin-bottom:-1600px;  /*关键*/  
  27. }  

  28. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  29. <html xmlns="http://www.w3.org/1999/xhtml">  
  30. <head>  
  31. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  32. <title>竖线画法</title>  
  33. <link href="../css/demo.css" rel="stylesheet" type="text/css" />  
  34. </head>  
  35. <body>  
  36.     <div class="maindiv">  
  37.         <div class="leftdiv"><br><br><br><br><br><br></div>  
  38.         <div class="centerdiv"></div>  
  39.         <div class="rightdiv"><br><br><br><br><br><br><br></div>  
  40.     </div>  
  41. </body>  
  42. </html>  
复制代码
效果图:

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

比较两个子div的高度哪一高。选择把高的那个div的相邻边框设为可见也可达到目的。
以下是js的代码
  1. function myfun(){  
  2.   var div1=document.getElementById("content");  
  3.   var div2=document.getElementById("side");  
  4.   var h1=div1.offsetHeight;  
  5.   var h2=div2.offsetHeight;  
  6.     if(h1>h2){  
  7.         div1.style.borderRight="1px dashed #B6AEA3";  
  8.     }else{  
  9.         div2.style.borderLeft="1px dashed #B6AEA3";  
  10.   }  
  11. }  
复制代码
总结
以上所述是小编给大家介绍的HTML如何在两个div标签中间画一条竖线,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

1

主题

53

回帖

128

积分

注册会员

积分
128
发表于 2024-4-29 16:09:01 | 显示全部楼层
我们一起努力,共同解决问题吧。

0

主题

53

回帖

107

积分

注册会员

积分
107
发表于 2024-5-12 09:23:12 | 显示全部楼层
保持尊重和礼貌对待其他成员是必要的。

1

主题

43

回帖

109

积分

注册会员

积分
109
发表于 2024-5-12 11:06:16 | 显示全部楼层
感谢分享,受益匪浅!

1

主题

70

回帖

161

积分

注册会员

积分
161
发表于 2024-5-24 15:22:15 | 显示全部楼层
太棒了!感谢分享这个信息!
发表于 2024-6-3 11:18:02 | 显示全部楼层
确实牛逼

1

主题

55

回帖

129

积分

注册会员

积分
129
发表于 2024-6-28 00:22:29 | 显示全部楼层
非常感谢你的观点,让我受益良多!
  • 打卡等级:无名新人
  • 打卡总天数:1
  • 打卡月天数:0
  • 打卡总奖励:30
  • 最近打卡:2024-04-20 07:41:19

2

主题

47

回帖

186

积分

等待验证会员

积分
186
发表于 2024-7-21 05:56:07 | 显示全部楼层
666666666666666666
  • 打卡等级:初来乍到
  • 打卡总天数:6
  • 打卡月天数:0
  • 打卡总奖励:97
  • 最近打卡:2024-08-20 16:26:13

1

主题

66

回帖

323

积分

中级会员

积分
323
发表于 2024-8-9 08:35:19 | 显示全部楼层
6666666666

1

主题

52

回帖

124

积分

注册会员

积分
124
发表于 2024-8-13 03:10:55 | 显示全部楼层
666666666666666666
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:31 , Processed in 0.091070 second(s), 29 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表