时间戳

首页 > 解决方案 > 以图像为中心的时间轴

html - 以图像为中心的时间轴

问题描述

有人可以帮帮我吗？！

我正在尝试将 PSD 文件编码为 HTML 和 CSS，但我正在努力处理其中一个部分。这是我想要做的图像：

点击这里

问题是我不知道如何将图像放在时间线中。我试图在 ::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;
    }

我认为这称为时间线，有很多教程都在谈论如何做这样的事情，但我不知道如何在时间线中制作图像。你能帮我做这件事吗？

谢谢

标签： htmlcsspsd

解决方案

要构建它，您可以使用 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 偶数/奇数选择器（我如何设置偶数和奇数元素的样式？）来设置元素使用的网格区域。

例子：

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

推荐阅读