我的主要目标是制作一个类似时间线的部分,我的项目将位于中间线(时间线)的两侧。屏幕大的时候我可以处理,但是屏幕小的时候,在移动的端,中间线就消失了。
这是我在全屏上创建的内容:
Hello World |
| 3
2 |
| 4
这是我在小屏幕上创建的:
| Hello World
| 3
| 2
| 4
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400&display=swap');
.timeline {
width: 80%;
max-width: 800px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.timeline-content {
overflow-wrap: break-word !important;
margin-bottom: 10%;
}
.timeline-component {
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
@media screen and (min-width: 689px) {
.timeline {
display: grid;
grid-template-columns: 1fr 3px 1fr;
}
.timeline-middle {
position: relative;
background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
width: 3px;
height: 100%;
}
.main-middle {
opacity: 0;
}
.timeline-circle {
position: relative;
top: 0;
left: 50%;
width: 15px;
height: 15px;
border-radius: 50%;
background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
}
<div class="timeline">
<div class="timeline-empty">
</div>
<div class="timeline-middle">
<div class="timeline-circle"></div>
</div>
<div class="timeline-component timeline-content">
<p>Time line 1</p>
</div>
<div class="timeline-component timeline-content">
<p>Time line 2</p>
</div>
<div class="timeline-middle">
<div class="timeline-circle"></div>
</div>
<div class="timeline-empty">
</div>
<div class="timeline-empty">
</div>
<div class="timeline-middle">
<div class="timeline-circle"></div>
</div>
<div class=" timeline-component timeline-content">
<p>Time line 3</p>
</div>
但实际上
这是当屏幕大小为全屏
时
这是当屏幕小
1条答案
按热度按时间nuypyhwy1#
首先,将
.timeline
分成单独的块,并在输出html时保持一致。第二,如果你想将样式应用于一般的线条和圆圈,不要将它们写在媒体查询
@media (min-width: 689px)
中。我为您提供了解决任务的一个选项(
order
属性完成了任务):