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

近日在画一个界面的时候，遇到一个需求：在界面当中画一条竖线，且这条竖线在高度上需要自动占满整个父div(即这条竖线的高度和两个div中较高的一个等高)。   往常我们画一条横线直接用标签<hr>即可，当画一条竖线的时候发现找不到标签。在网上查找了一下资料，大致推荐用js来做。小弟比较偏执想用纯css来做，最终找到了解决方法，下面我就来分享一下我的做法。   在两个子div中加多一个div，并设置左（右）边框为可见，并且利用利用padding-bottom|margin-bottom正负值相抵消的原理。例如设置    padding-bottom:1600px; margin-bottom:- 在HTML页面设计中，有时我们需要在两个div之间添加一条竖线来分割或美化布局。本文将探讨如何使用纯CSS技术实现这一目标，避免使用JavaScript，从而保持页面的响应性和性能。 我们要明白HTML没有专门为绘制竖线设计的标签，但我们可以巧妙地利用现有的CSS属性来实现这个效果。在描述中提到的方法是通过在两个子div之间插入一个新的div，并设置其边框和内填充（padding）以及外边距（margin）来完成。 具体步骤如下： 1. 创建一个包含两个子div的父div，为父div设置宽度、内填充和溢出隐藏。溢出隐藏（`overflow:hidden`）用于裁剪超出父div高度的内容，确保竖线的高度与最高子div一致。 ```css .maindiv { width: 900px; padding: 10px; overflow: hidden; border: 1px solid black; } ``` 2. 设置两个子div，分别浮动到左侧和右侧，设定各自的宽度和背景色。 ```css .leftdiv { float: left; width: 400px; background-color: #CC6633; } .rightdiv { float: right; width: 400px; background-color: #CC66FF; } ``` 3. 添加第三个div，作为竖线，浮动到左侧，设定宽度为竖线的宽度，然后设置右边框为虚线，并利用padding-bottom和margin-bottom的正负值相抵消，使得竖线高度自适应。 ```css .centerdiv { float: left; width: 50px; border-right: 1px dashed black; padding-bottom: 1600px; /* 关键 */ margin-bottom: -1600px; /* 关键 */ } ``` 4. 编写HTML结构，包含上述CSS类名的div元素。 ```html <div class="maindiv"> <div class="leftdiv"> <!-- 内容 --> </div> <div class="centerdiv"></div> <div class="rightdiv"> <!-- 内容 --> </div> </div> ``` 这种方法的优点在于它完全依赖于CSS，不需要JavaScript来动态计算高度。然而，这种方法可能不适用于高度动态变化的情况，因为需要手动调整padding-bottom和margin-bottom的值。如果高度是动态的，可以考虑使用JavaScript来检测并设置竖线的高度。 另一种JavaScript解决方案是检测两个子div的高度，然后根据哪个更高来显示相应的边框。以下是一个简单的示例： ```javascript function setVerticalLine() { var div1 = document.getElementById("div1"); var div2 = document.getElementById("div2"); var h1 = div1.offsetHeight; var h2 = div2.offsetHeight; if (h1 > h2) { div1.style.borderRight = "1px dashed #B6AEA3"; } else { div2.style.borderLeft = "1px dashed #B6AEA3"; } } // 在页面加载完成后调用此函数 window.onload = setVerticalLine; ``` 这种方法的优势在于它可以自动适应子div高度的变化，但缺点是需要JavaScript支持，并且可能影响页面的初始加载速度。 总结来说，HTML中在两个div之间画一条竖线可以通过CSS或JavaScript实现。CSS方法简单且适用于静态高度，而JavaScript方法更适用于动态高度变化的情况。在实际项目中，应根据需求和项目特点来选择合适的方法。