我试图将这个时间轴效果转换为水平时间轴，文本块水平对齐，"行"效果从左到右.我try 了多种方法，但不知何故，我无法让它看起来像垂直方向的那样整洁.
垂直时的外观:
以下是垂直时间轴效果的一些可重现的片段:
:root {
--primary-color: #212121;
--background-color: #111;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
background: var(--background-color);
font-family: var(--font);
display: flex;
justify-content: center;
}
/* Timeline Container */
.timeline {
background: var(--primary-color);
margin: 20px auto;
padding: 20px;
}
/* Card container */
.card {
position: relative;
max-width: 400px;
}
/* setting padding based on even or odd */
.card:nth-child(odd) {
padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
padding: 30px 30px 30px 0;
}
/* Global ::before */
.card::before {
content: "";
position: absolute;
width: 50%;
border: solid orangered;
}
/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
left: 0px;
top: -4.5px;
bottom: -4.5px;
border-width: 5px 0 5px 5px;
border-radius: 50px 0 0 50px;
}
/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
.card:nth-child(odd)::before {
top: -5px;
bottom: -5px;
}
}
/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
right: 0;
top: 0;
bottom: 0;
border-width: 5px 5px 5px 0;
border-radius: 0 50px 50px 0;
}
/* Removing the border if it is the first card */
.card:first-child::before {
border-top: 0;
border-top-left-radius: 0;
}
/* Removing the border if it is the last card and it's odd */
.card:last-child:nth-child(odd)::before {
border-bottom: 0;
border-bottom-left-radius: 0;
}
/* Removing the border if it is the last card and it's even */
.card:last-child:nth-child(even)::before {
border-bottom: 0;
border-bottom-right-radius: 0;
}
/* Information about the timeline */
.info {
display: flex;
flex-direction: column;
background: #333;
color: gray;
border-radius: 10px;
padding: 10px;
}
/* Title of the card */
.title {
color: orangered;
position: relative;
}
/* Timeline dot */
.title::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 999px;
border: 3px solid orangered;
}
/* text right if the card is even */
.card:nth-child(even)>.info>.title {
text-align: right;
}
/* setting dot to the left if the card is odd */
.card:nth-child(odd)>.info>.title::before {
left: -45px;
}
/* setting dot to the right if the card is odd */
.card:nth-child(even)>.info>.title::before {
right: -45px;
}<div class="timeline">
<div class="outer">
<div class="card">
<div class="info">
<h3 class="title">Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
</div>我不知道为什么，但我不能使它垂直使用display: flex;和flex-direction: row;
这就是我try 过的:
:root {
--primary-color: #212121;
--background-color: #111;
--font: sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
background: var(--background-color);
font-family: var(--font);
display: flex;
justify-content: center;
}
/* Timeline Container */
/* Other styles remain unchanged */
/* Timeline Container */
.timeline {
white-space: nowrap;
overflow-x: auto;
display: flex;
flex-direction: row;
align-items: center;
width:100%;
min-height:100vh;
/* Align cards in the middle */
}
/* Card container */
.card {
display: inline-block;
vertical-align: top;
/* Keep cards aligned at the top */
max-width: none;
/* Remove max-width restriction */
width: auto;
/* Auto width based on content */
}
/* Removing padding adjustments based on odd/even */
.card {
padding: 0 30px;
}
/* Global ::before adjustments for horizontal layout */
.card::before {
height: 50%;
width: 100%;
top: 50%;
left: 0;
}
/* Adjusting the "snake" line for all cards */
.card::before {
border-width: 5px 5px 0 5px;
border-radius: 50px 50px 0 0;
}
/* First card adjustments */
.card:first-child::before {
border-left: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Last card adjustments */
.card:last-child::before {
border-right: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
/* Information about the timeline */
.info {
width:50%;/* Adjust width or max-width here if necessary */
}
/* Timeline dot */
.title::before {
top: -45px;
/* Adjust as necessary */
left: 50%;
/* Center dot horizontally */
margin-left: -5px;
/* Adjust margin to center the dot */
}
/* Remove text alignment and dot positioning based on odd/even */
.card>.info>.title {
text-align: left;
}
.card>.info>.title::before {
right: auto;
}
@media only screen and (max-width: 768px) {
/* Adjustments for smaller screens */
.card {
padding: 0 15px;
}
.title::before {
top: -35px;
/* Adjust as necessary for smaller screen */
}
}
/* Additional media queries can be added for responsive adjustments */<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="timeline_styles.css">
</head>
<body>
<div class="timeline">
<div class="outer">
<div class="card">
<div class="info">
<h3 class="title">Title 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">Title 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
</div>
</div>
</body>
</html>我正在try 以下更改:
-
.timeline容器现在是具有行方向的挠性容器， 启用水平布局. - 将显示
.card个元素 内联-没有最大宽度和垂直对齐到顶部的块. - 伪元素
.card::before adjustments现在在每张卡上创建一条水平线. -
.title::before调整定位点的位置 在每个标题的上方.
What I'm hoping to achieve would look like that:
如果有人能告诉我为什么我的逻辑是错的.