对齐文本和图像

Question

我遇到了特定部分的问题。期望的目标是，它看起来像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; 
    } 
} 

此外，最后的灰线溢出一点点，我不能使它只要最后一个图像。

Answer 1

可以使用一些引导类的至reverse flow

使用.flex-row设置一个水平方向（浏览器默认值），或.flex-row-reverse开始从相对侧上的水平方向上。

• 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一个空的空间：

• CSS可能的更新

.timeline li:before { 
    content:''; 
    width: 45%; 
} 

https://codepen.io/gc-nomade/pen/gxJvBj