首页两个左右分布的div之间增添一条竖线

两个左右分布的div之间增添一条竖线

时间: 2024-11-27 12:10:01 浏览: 27

要在两个并排的左右分布的`<div>`元素之间添加一条垂直的分割线，你可以结合HTML和CSS来实现。首先，在HTML结构中创建两个`<div>`，然后在CSS中添加样式。这里是一个简单的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .container { display: flex; } .box { width: 50%; height: 100px; margin-right: 1px; /* 为加宽的边距留出空间给竖线 */ border: none; /* 确保不影响原div的边框 */ box-sizing: border-box; /* 让内容区域包含边框 */ } .vertical-line { width: 1px; height: 100%; /* 水平线的高度跟随父元素 */ background-color: black; /* 根据需要选择颜色 */ position: absolute; /* 使用绝对定位使其覆盖在.box之上 */ left: calc(50% - 0.5px); /* 将线居中放置，减去半个线宽 */ z-index: 1; /* 高于.box元素的z-index */ } </style> </head> <body> <div class="container"> <div class="box"></div> <div class="vertical-line"></div> <div class="box"></div> </div> </body> </html> ``` 这个例子中，`.vertical-line`类的`position: absolute`和`left`属性保证了它会垂直跨越两个`.box`元素之间。

阅读全文