对齐文本和图像
Aligning Text And Images
我在特定部分遇到困难。期望的目标是让它看起来像 this.
我得到 this。
.timeline {
text-align: center;
}
#about-us {
ul {
&:before {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1.5px;
content: '';
background-color: #f1f1f1;
z-index: -1;
}
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
}
.timeline-img {
border: 7px solid #f1f1f1;
border-radius: 50%;
text-align: center;
display: inline-block;
}
.timeline-1,
.timeline-3 {
.timeline-info {
float: left;
width: 45%;
text-align: right;
}
}
.timeline-2,
.timeline-4 {
.timeline-info {
float: right;
width: 45%;
text-align: left;
}
}
还有,最后那条灰线有点溢出,我做不到最后一张图那么长
你可以使用一些bootstrapclass到reverse flow
Use .flex-row
to set a horizontal direction (the browser default), or .flex-row-reverse
to start the horizontal direction from the opposite side.
- HTML 可能更新
<ul class="timeline">
<li class="timeline-1 d-flex flex-row-reverse"></li>
<li class="timeline-2 d-flex"></li>
<li class="timeline-3 d-flex flex-row-reverse"></li>
<li class="timeline-4 d-flex"></li>
<li class="timeline-5 "></li>
</ul>
然后,您可以添加一个伪来填充与 timeline-info
宽度相同的空白 space :
- CSS 可能更新
.timeline li:before {
content:'';
width: 45%;
}
我在特定部分遇到困难。期望的目标是让它看起来像 this.
我得到 this。
.timeline {
text-align: center;
}
#about-us {
ul {
&:before {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 2px;
margin-left: -1.5px;
content: '';
background-color: #f1f1f1;
z-index: -1;
}
}
img {
width: 150px;
height: 150px;
border-radius: 50%;
}
}
.timeline-img {
border: 7px solid #f1f1f1;
border-radius: 50%;
text-align: center;
display: inline-block;
}
.timeline-1,
.timeline-3 {
.timeline-info {
float: left;
width: 45%;
text-align: right;
}
}
.timeline-2,
.timeline-4 {
.timeline-info {
float: right;
width: 45%;
text-align: left;
}
}
还有,最后那条灰线有点溢出,我做不到最后一张图那么长
你可以使用一些bootstrapclass到reverse flow
Use
.flex-row
to set a horizontal direction (the browser default), or.flex-row-reverse
to start the horizontal direction from the opposite side.
- HTML 可能更新
<ul class="timeline">
<li class="timeline-1 d-flex flex-row-reverse"></li>
<li class="timeline-2 d-flex"></li>
<li class="timeline-3 d-flex flex-row-reverse"></li>
<li class="timeline-4 d-flex"></li>
<li class="timeline-5 "></li>
</ul>
然后,您可以添加一个伪来填充与 timeline-info
宽度相同的空白 space :
- CSS 可能更新
.timeline li:before {
content:'';
width: 45%;
}