时间轴，图像居中

Question

有人可以帮我吗？！

我正在尝试将PSD文件编码为HTML和CSS，但是我在其中一节中苦苦挣扎。这是我想做什么的图片：

Click Here

问题是我不知道如何将图像放入时间线。我试图将图像添加到:: after psuedo中，但是我认为这样做不是正确的方法。

这是我的HTML代码：

<section class="about">
    <div class="wrapper">
        <h3>About Us</h3>
        <p>Lorem ipsum dolor sit amet consectetur.</p>
    <div class="container left">
            <div class="content">
                <h5>JULY 2010<br> Our Humble Beginnings</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
            </div>
        </div>

        <div class="container right">
            <div class="content">
                <h5>January 2011<br> Facing Startups Battles</h5>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
            </div>
        </div>
    </div>
</section>

这是我的CSS代码：

    .about .wrapper{
        padding: 80px 10%;
        text-align: center;
        position: relative;
    }

    .about .wrapper::after{
        content: '';
        position: absolute;
        top: 200px;
        bottom: 0;
        width: 6px;
        background: red;
    }

    .about h5{
        line-height: 1.5;
        font-size: 1em;
        padding-bottom: .5em;
    }

    .about .container{
        position: relative;
        width: 50%;
        top: 60px;
        margin: 0 0 60px 0;
    }

    .about .container::after{
        content: 'How Can I Add an Image Here in this circle?';
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        top: 20px;
        right: -104px;
        background-color: blue; /* Just because there is no image */
        background-image: url(assets/img/about-1.png);
        background-repeat: no-repeat;
        background-size: cover;
        z-index: 2;
    }

    .left{
        text-align: right;
    }

    .right{
        text-align: right;
    }

    .content{
        padding: 30px 0px 80px 0px;
    }

    .left .content{
    padding-right: 140px;
    }
    .right .content{
      padding-left: 140px
    }
    .right{
    text-align: left;
  left: 50%;


    }

.right:after {
    left: -104px;
    }

我认为这称为时间轴，有很多教程都在讨论如何做这样的事情，但是我不知道如何在时间轴中制作图像。您能帮我做到这一点吗？

谢谢

Answer 1

要构建它，您可以使用CSS网格布局（指南：https://css-tricks.com/snippets/css/complete-guide-grid/）

将每个内容+图像在布局中排成一行。并将每一行作为网格的容器。

您可以从视觉上将每一行细分为3列。一栏用于左侧内容，第二栏用于图像，第三栏用于右侧内容。

示例布局的css网格示例：

.grid-container {
  display: grid;
  grid-template-columns: 1fr 10em 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "content-left image content-right";
  text-align: center;
}

.content-left { grid-area: content-left; background: lightblue; }

.image { grid-area: image; background: lightgreen; }

.content-right { grid-area: content-right; background: lightblue; }

<div class="grid-container">
  <div class="content-left">Left content</div>
  <div class="image">Image</div>
  <div class="content-right">Right content</div>
</div>

要在左侧和右侧的内容之间交替，可以使用css偶/奇选择器（How can I style even and odd elements?）设置元素使用的网格区域。

示例：

我为此答案构建了时间轴布局的示例，您可以在https://codepen.io/hendrysadrak/pen/VwLEraz处找到