当前时间轴实现基于 3800px 左右宽度的屏幕尺寸。我使用
display: griddisplay: flex::after应该看起来像这样： https://in.pinterest.com/pin/885027764250334439/
HTML 文件
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel = "stylesheet" type = "text/css" href="s.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Sacramento&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Dancing+Script&family=Libre+Baskerville&family=Montserrat:wght@100;400&display=swap" rel="stylesheet">
<title>Personal Website</title>
</head>
<body>
<div id="experience">
<h2>Heading Title</h2>
<div class="timeline">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="time-graphic"><img src="img/school.png" alt="school"></div>
<div class="time-graphic"><img src="img/work.png" alt="briefcase"></div>
<div class="time-graphic"><img src="img/question.png" alt="briefcase"></div>
<div class="time-graphic"><img src="img/labtop.png" alt="labtop"></div>
<div class="date" id="orange">2017</div>
<div class="date" id="yellow">2020</div>
<div class="date" id="lightblue">2022</div>
<div class="date" id="pink">2023</div>
<div class="date" id="green">2024</div>
</div>
<div class="time-content" id="orange2">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
<div class="time-content" id="yellow2">
<h3>Title Two</h3>
<p>
Perpetuum, cras urgentis integer, A esse dis originem id facer si gestarum sequela.
Ac E personarum sint ad belgos quas, S fecerunt si e Sem Malevolorum risus,
eorum eu vicissitudo ullo zzril-nec generositas eget diam.
</p>
</div>
<div class="time-content" id="lightblue2">
<h3>Title Three</h3>
<p>
Nunc li unde typi at optio se elit-ullo deorum optio temporibus, E memento ut caduca potissimum nunc diuturna praesentiam.
Minim o nunc me p recusandae ut v sociosqu malevoli, eodem S facunda praeteritis lius incidunt sed polisniinus dignus,
se praevcnire dis exaudire lius veneta significat eu auctor.
</p>
</div>
<div class="time-content" id="pink2">
<h3>Title Four</h3>
<p>
Ac ea genere arcu in est resipiscet odit, D'se lorem qui amet in ac victualia iure ac praeiudicata.
Te alias clari cras wisi abeundum dulcedo negabat modi electionem.
Lategue odit partibus vel arendom arcu dis saepe cum se noviciam, novembris ipsum 00% te ad cum.
</p>
</div>
<div class="time-content" id="green2">
<h3>Title Five</h3>
<p> Meruerunt, visccra hic nec in 8023, P vero dui absolute si morsum se o rem haeres odio,
confinia unde mi ac officii vivamus: Hac Spectaculum.
</p>
</div>
</div>
</body>
</html>
CSS 文件
/*experience*/
#experience {
height: 100vh;
}
#experience h2 {
color: #7C93C3;
font-size: 50px;
font-family: "Montserrat", sans-serif;
margin-left: 100px;
}
.timeline {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 5px;
width: 1500px;
margin-left: 10%;
}
.time-graphic img {
height: 50px;
}
.time-graphic , .date{
display: flex;
justify-content: center;
}
.date {
font-size: 50px;
color: white;
font-family: "Montserrat", sans-serif;
}
#orange {
background-color: rgba(247,138,55,255);
position: relative;
}
#green {
background-color: #82a443;
position: relative;
}
#pink {
background-color: #e5567f;
position: relative;
}
#lightblue {
background-color: #43c3d0;
position: relative;
}
#yellow {
background-color: #e9c43b;
position: relative;
}
#orange::after{
content: '';
position: absolute;
width: 6px;
height: 300%;
background-color: rgba(247,138,55,255);
top: 60px;
}
#yellow::after {
content: '';
position: absolute;
width: 6px;
height: 700%;
background-color: #e9c43b;
top: 60px;
}
#lightblue::after {
content: '';
position: absolute;
width: 6px;
height: 300%;
background-color: #43c3d0;
top: 60px;
}
#pink::after {
content: '';
position: absolute;
width: 6px;
height: 700%;
background-color: #e5567f;
top: 60px;
}
#green::after {
content: '';
position: absolute;
width: 6px;
height: 300%;
background-color: #82a443;
top: 60px;
}
.time-content{
width: 20%;
padding: 20px;
border-radius: 25px;
font-family: "Montserrat", sans-serif;
display: inline-block;
}
.time-content p{
font-size: 15px;
}
#orange2 {
background-color: rgba(247,138,55,255);
position: relative;
top: -50px;
left: 120px;
}
#green2 {
background-color: #82a443;
position: relative;
left: 1320px;
top: -250px;
}
#pink2 {
background-color: #e5567f;
position: relative;
top: 350px;
right: 250px;
}
#lightblue2 {
background-color: #43c3d0;
position: relative;
top: -20px;
left: -120px;
}
#yellow2 {
background-color: #e9c43b;
position: relative;
top: 250px;
}
[1]: https://i.stack.imgur.com/woRCs.png
这可能是您正在寻找的解决方案。我重新排列了 HTML（并重命名了类 - 请随意将它们重命名回来），所以现在 year 类代表带有图像、日期和描述的年份。
然后我将它们放入一排并使用 Flexbox 设置它们的样式。当屏幕尺寸低于1000px时，每年被放入单独的行，并且描述宽度增加到屏幕尺寸的60%。
*, ::before, ::after{
box-sizing: border-box;
}
#experience {
height: 100vh;
font-family: 'Montserrat', sans-serif;
}
#experience h2 {
color: #7C93C3;
font-size: 50px;
margin-left: 100px;
}
.timeline{
display: flex; /* get every year div inline and center */
justify-content: center;
}
.year{
display: flex;
flex-direction: column;
align-items: center;
width: 200px; /* set your width */
}
.time-graphic{
height: 50px;
}
.date{
width: 200px; /* must be same as .year width */
text-align: center;
font-size: 50px;
padding: 10px;
color: white;
}
.date::after{
content: '';
display: flex;
position: absolute;
width: 5px;
margin: 0 calc(100px - 10px - 2.5px);
margin-top: 10px;
height: 400px;
}
.year:nth-child(even) .date::after{
height: 75px; /* for every even element smaller size */
}
.time-content{
box-sizing: content-box;
text-align: center;
margin-top: 400px; /* same as .date::after height */
padding: 20px;
border-radius: 25px;
width: 250px;
}
.year:nth-child(even) .time-content{
margin-top: 75px;
}
@media screen and (max-width: 1000px){
#experience h2{
margin: 20px 0; /* delete margin-left and center the heading */
text-align: center;
}
.timeline{
flex-direction: column; /* make years go into a column */
}
.year{
align-self: center;
margin-bottom: 20px;
}
.date::after{
height: 100px;
}
.time-content{
margin-top: 100px;
width: 60vw;
}
}
/* declare colors */
.orange, .orange::after{
background: rgba(247,138,55,255);
}
.green, .green::after{
background: #82a443;
}
.pink, .pink::after{
background: #e5567f;
}
.lightblue, .lightblue::after{
background: #43c3d0;
}
.yellow, .yellow::after{
background: #e9c43b;
}<head>
<link rel = "stylesheet" type = "text/css" href="s.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Caveat&family=Dancing+Script&family=Libre+Baskerville&family=Montserrat:wght@100;400&display=swap" rel="stylesheet">
</head>
<body>
<div id="experience">
<h2>Heading Title</h2>
<div class="timeline">
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date orange">2017</div>
<div class="time-content orange">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date green">2020</div>
<div class="time-content green">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date pink">2022</div>
<div class="time-content pink">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date lightblue">2023</div>
<div class="time-content lightblue">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
<div class="year">
<div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
<div class="date yellow">2024</div>
<div class="time-content yellow">
<h3>Title One</h3>
<p>Quo fugit oppressu P quo in est velit ut opponunt memento sem operis quia probat quas eu disordo,
cum eos charisma o dolor id Posterum Utraque, angeum nunc in leo coronati odit ad.
Neque diam urna tesiimonium harum odit satisfactus castra ad fortiaue.
</p>
</div>
</div>
</div>
</div>
</body>