如果有更好的思路或者建议,请务必在评论区告诉我。
一、基本思路
- 首先在最外层构建一个 box,用来包裹所有的 item
- 每一个子项拥有各自的元件,包括:line,icon,content
- 使用伪元素来创建 line 和 icon
- 把内容放在右边
二、具体实现
话不多说,直接上代码,仔细看注释。
.timeline {
display: block;
background-color: #fff;
}
.timeline>.item {
// 使用内填充将 content 定位到右边
padding