### 何时使用

需要对不同章节的文本段落进行分割时；

需要对行内文字、链接等进行分割时。

### 与页面布局相关

##### 通栏布局。横向贯穿整个页面，区分更加独立的内容信息，让信息分隔的更明显。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-1.png"/>

<hr />

##### 内嵌布局。一般在两侧预留缺口，区分同一模块下的相关内容，让用户浏览时更加高效。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-2.png"/>

<hr />

##### 组合布局。通栏分割线与内嵌分割线的组合布局。

<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-3.png"/>

### 推荐/慎用示例

##### 当有明显的留白或副标题已经对内容起到分割作用时，要避免过度使用分割线导致的视觉干扰。

<div class="legend">
  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-4.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/good.png" />
  </div>

  <div class="item">
    <img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/design/divider-5.png"/>
    <img class="tag" src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/bad.png" />
  </div>
</div>
