为什么时间线不想走到容器的末尾？

Question

我正在创建摄影作品集。我在容器的边缘放置了不同的照片，在中心想添加一些时间轴之类的东西。问题是我的时间线在第二张图片后停止。

.timeline {
    display:flex;
    width: 75%;
    flex-wrap: wrap;
}

.progressbar {
    display: flex;
    width: 100%;
}

.progressbar:before {
    content: "";
    width: 15px;
    height: 100%;
    background-color: #ffffff;
    border: 1px inset;
    position: absolute;
}

<section class="timeline">
            <ul class="progressbar">
                <li class="left">Lorem ipsum dolor sit amet<img class="timeline_picture" src="img/1.jpg"></li>
                <li class="right">Lorem ipsum dolor sit amet<img class="timeline_picture" src="img/2.jpeg"></li>
                <li class="left">Lorem ipsum dolor sit amet<img class="timeline_picture" src="img/3.jpeg"></li>
            </ul>
        </section>

Answer 1

  * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;

        }

        .timeline {
            width: 100%;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .timeline:before {
            content: "";
            width: 15px;
            height: 100%;
            background-color: #000000;
            border: 1px inset;
            position: absolute;
            display: flex;
            align-self: center;

        }

        .timeline .left {
            display: flex;
            align-self: flex-end
        }

        .timeline .right {
            display: flex;
            align-self: flex-start;
        }

<body>
    <h1>Lorem</h1>
    <ul class="timeline">
        <li class="left"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="right"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="left"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="right"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="left"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="right"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="left"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="right"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="left"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="right"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
        <li class="left"> <a href="https://placeholder.com"><img src="http://via.placeholder.com/140x100"></a></li>
    </ul>
</body>

Answer 2

您需要在主元素 (.progressbar) 上使用 position: relative;，以便为绝对定位元素提供宽度、高度和位置参考。

（但您的代码片段和代码相当混乱 - 线条是垂直的，但项目彼此相邻（？））

为什么时间线不想走到容器的末尾？

Why the timeline doesn't wanna go to the end of container?

html

javascript

css

frontend

timeline