以图像为中心的时间轴

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>

（生成的网格：https://grid.layoutit.com/）

要在左侧和右侧的内容之间切换，您可以使用 css even/odd 选择器 (How can I style even and odd elements?) 来设置用于元素的网格区域。

示例：

我已经为这个答案构建了一个时间轴布局示例，您可以在 https://codepen.io/hendrysadrak/pen/VwLEraz

找到它

Answer 2

试试这个：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />

<title></title>
</head>
<body>
<section class="about">
    <div class="wrapper">
        <div>
            <h3>About Us</h3>
            <p>Lorem ipsum dolor sit amet consectetur.</p>
        </div>
        <div id="container">
          <div class="row">
             <div id="col1" class="col right">
                  <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 id="col2" class="col"><img class="img" src="assets/img/about-1.png"/></div>
          </div>
          <div class="row2" >
              <div id="col3" class="col"><img class="img" src="assets/img/about-1.png"/></div>
              <div id="col4" class="col left">
                  <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>
    </div>
</section>
</body>
</html>

在 main.css 文件中：

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

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

    .row {
      width: 59%;
      margin-right: 41%;
      display: flex;
    }
    .row2 {
      width: 59%;
      display: flex;
      margin-left: 41%;
    }
    .col {
      flex:1;    
    }
    .col.left {
      text-align: left;
    }
    .col.right {
      text-align: right;    
    }
    #col2 {
      flex-basis: 30%;
    }
    #col1 { 
      flex-basis: 70%;    
    }
    #col3 {
      flex-basis: 30%;
    }
    #col4 { 
      flex-basis: 70%;    
    }
    .img {
        margin: 10% 5%;
        width: 90%;
        border-radius: 50%;
     }

     #container {
      background-image: linear-gradient(lightgrey,lightgrey);
      background-size: 2px 100%;
      background-repeat: no-repeat;
      background-position: center center;
     }

把这个放在 assets/img/about-1.png

以图像为中心的时间轴

Timeline with images in center

html

css

psd

示例：