图像位于中心的时间轴
有人可以帮帮我吗？！
我正在尝试将 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;
}
我认为这叫做时间轴，有很多教程讨论如何做这样的事情，但我不知道如何在时间轴线上制作图像。你能帮我做这个吗？
呼如林2回答
-
三国纷争
将每个内容+图像视为布局中的一行。每行作为网格的容器。您可以直观地将每一行分解为 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> -
收到一只叮咚
尝试这个：<!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; }将其放入 asset/img/about-1.png
随时随地看视频慕课网APP
相关分类
Html5
