텍스트 및 이미지 정렬

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

당신은 반대쪽에서 수평 방향을 시작하는 수평 방향 (브라우저의 기본값)을 설정하는 데 사용 .flex-rowreverse flow

에 부트 스트랩 클래스의 일부를 사용하거나 .flex-row-reverse 수 있습니다.

• CSS 가능한 업데이트를
:

• 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의 같은 폭의 빈 공간을 채우기 위해 의사를 추가 할 수 있습니다

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

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