Css时间轴布局_Css时间轴布局案例整理

一、Css时间轴布局案例1，简单版
特点：内容项高度自适应。
Css+Html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 100px;
        }

        .list {
            border: 1px solid red;
            position: relative;
            padding: 10px;
            overflow: hidden;
        }

        .list .line {
            position: absolute;
            width: 2px;
            height: 100%;
            background: #eee;
            top: 30px;
            left: 10px;
        }

        .list .item {
            margin-left: 15px;
            padding: 10px 0px;
            color: #888;
            position: relative;
            border: 0px solid green;
        }

        .list .item .time {
            padding-top: 5px;
            font-size: 12px;
        }

        .list .circle {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #ccc;
            position: absolute;
            top: 10px;
            left: -19px;
        }

        .list .circle1 {
            background: rgb(135, 201, 36);
            box-shadow: 0px 0px 5px 1px rgb(135, 201, 36);
        }
    </style>
</head>

<body>
    <!-- 时间轴布局案例 -->
    <div class="list">
        <!-- 线段 -->
        <div class="line"></div>
        <!-- 内容项+点 -->
        <div class="item">
            <div class="circle circle1"></div>
            <div class="text">
                小程序是当前最流行，体验度最高的企业服务工具，宣传工具，值得拥有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="text">
                小程序是当前最流行，体验度最高的企业服务工具，宣传工具，值得拥有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="text">
                小程序是当前最流行，体验度最高的企业服务工具，宣传工具，值得拥有！
                小程序是当前最流行，体验度最高的企业服务工具，宣传工具，值得拥有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
        <div class="item">
            <div class="circle"></div>
            <div class="text">
                小程序是当前最流行，体验度最高的企业服务工具，宣传工具，值得拥有！
            </div>
            <div class="time">
                2021-10-1 15:30
            </div>
        </div>
    </div>
</body>

</html>
View Code
效果：
二、Css时间轴布局案例2，扩展版
待完善