div 垂直分割线
时间: 2023-08-03 19:21:51 浏览: 220
HTML表格属性讲解
要在 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` 属性设置了一个灰色的垂直线条。
阅读全文