對齊文本和圖像

我遇到了特定部分的問題。期望的目標是，它看起來像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; 
    } 
}

此外，最後的灰線溢出一點點，我不能使它只要最後一個圖像。

來源

2017-09-06 KestVir

你是不是用引導的網格系統呢？我現在正在使用網格系統開發解決方案。 –

可以使用一些引導類的至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

來源

2017-09-06 22:06:53

感謝您的解答，我剛剛得到了幾個問題： 1.如果'.timeline li：before'的寬度爲45％，並且.timeline-info的寬度相同，這意味着剩下10％，那它去哪了？它是圖像div嗎？因爲我試圖給出所提到的元素50％的寬度，並且imgs沒有突破到下一行。 2.我注意到圖像已經失去了8px左右的寬度。當我將第一個問題中提到的元素的寬度從45％減少到40％時，imgs恢復了全寬，但略偏離中心。 45％是糖果還是其他東西？ – KestVir

@KestVir最好將flex：1設置爲timeline-info和：before（https://codepen.io/gc-nomade/pen/gxJvBj更新），並且忘記寬度，瀏覽器將處理它，他們將共享中心圖像不會使用的均勻空間。這是典型的flex事物，它是靈活的:)當你設置靜態值時，瀏覽器將嘗試調整，元素可以擴展，縮小或溢出 –

對齊文本和圖像

回答

相關問題