放置圖片之間的文字

Question

如何製作一個可以滾動的水平排列的圓形圖像，該圖像源自下方帶有字幕的方形圖像。如果可能的話，讓它彼此分開。對不起，語法錯誤

Answer 1

在我回答你的問題之前，請注意Stack Overflow不是一個尋求代碼的平臺，而是尋求你已經自己編寫的非工作代碼的幫助。正如CBroe所述，我們強烈建議您閱讀How to Ask。不要指望將來會有這樣的答案。

首先問題是如何在我們來到CSS部分之前在HTML中構造元素。既然你要求排列具有「容器 - 元素」結構的多個元素，這似乎具有啓發性。

div (container) 

    div (element1) 
    div (element2) 
    div (element3) 
    ... 

/div 

現在我們必須將圓形圖像與下面的標題一起放在元素中。這也很簡單：

div (element) 

    img (circular picture) 
    div (caption) 

/div 

讓我們翻譯成正確的HTML這

<div class="container"> 

    <div class="elem"> 
     <img src=""/> 
     <div>Caption #1</div> 
    </div> 

    <div class="elem"> 
     <img src=""/> 
     <div>Caption #2</div> 
    </div> 

    <div class="elem"> 
     <img src=""/> 
     <div>Caption #3</div> 
    </div> 

    ... 

</div> 

時間進入CSS。截至目前，每個元素都是垂直對齊的，而不是水平對齊的。我個人非常喜歡的一個解決方案是Flexbox。它可以讓你用多個元素動態播放，這正是我們正在尋找的。

.container { 
    display: flex; 
    overflow-x: scroll; 
} 

這足以讓每個元素水平對齊，因爲Flexbox默認情況下會水平地構造項目。 overflow-x: scroll;防止項目調整網頁的大小，並使容器作爲修補程序水平滾動。

剩下的唯一事情就是讓圖像變成圓形，這很容易做到。所有我們要做的是增加一個border-radius比圖像尺寸更大的本身：

.elem img { 
    width: 100px; 
    height: 100px; 
    border-radius: 500px; 
} 

完成。

.container { 
 
    display: flex; 
 
    overflow-x: scroll; 
 
} 
 

 
.elem { 
 
    padding: 8px; 
 
} 
 

 
.elem img { 
 
    margin: 8px; 
 
    background-color: grey; 
 
    
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 5000px; 
 
} 
 

 
.elem div { 
 
    text-align: center; 
 
    font-size: 18px; 
 
}

<div class="container"> 
 
    <div class="elem"> 
 
    <img class="pic" src="https://www.famousbirthdays.com/headshots/justin-bieber-2.jpg" /> 
 
    <div>Caption #1</div> 
 
    </div> 
 

 
    <div class="elem"> 
 
    <img/> 
 
    <div>Caption #2</div> 
 
    </div> 
 

 
    <div class="elem"> 
 
    <img/> 
 
    <div>Caption #3</div> 
 
    </div> 
 

 
    <div class="elem"> 
 
    <img/> 
 
    <div>Caption #4</div> 
 
    </div> 
 

 
    <div class="elem"> 
 
    <img/> 
 
    <div>Caption #5</div> 
 
    </div> 
 

 
    <div class="elem"> 
 
    <img/> 
 
    <div>Caption #6</div> 
 
    </div> 
 

 
    <div class="elem"> 
 
    <img/> 
 
    <div>Caption #7</div> 
 
    </div> 
 
</div>