首页div 垂直分割线

div 垂直分割线

时间: 2023-08-03 18:21:51 浏览: 75

要在 HTML 中添加垂直分割线，可以使用 `<div>` 标签和 CSS 样式来实现。具体步骤如下： 1. 在 HTML 中创建两个 `<div>` 元素，分别代表左侧和右侧的内容区域。 2. 使用 CSS 设置这两个 `<div>` 元素的宽度和高度，并将它们放置在同一行内。 3. 使用 CSS 设置一个 `<div>` 元素的边框样式，使其成为垂直分割线。以下是示例代码： ``` <!DOCTYPE html> <html> <head> <style> .left { float: left; width: 50%; height: 300px; background-color: #f2f2f2; } .right { float: right; width: 50%; height: 300px; background-color: #e6e6e6; } .line { float: left; height: 300px; border-left: 1px solid #ccc; } </style> </head> <body> <div class="left">左侧内容</div> <div class="line"></div> <div class="right">右侧内容</div> </body> </html> ``` 在这个示例中，左侧和右侧的 `<div>` 元素分别占据了页面的左半部分和右半部分，中间的 `<div>` 元素则作为分割线，使用 CSS 的 `border-left` 属性设置了一个灰色的垂直线条。