画像の間にテキストを配置する

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にCSSに入るために

<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> 

時間をこれを翻訳してみましょう。現在、すべての要素は水平方向ではなく垂直方向に整列されています。私が個人的に気に入っているのは、Flexboxです。これは、正確に私たちが探しているものである複数の要素で動的に演奏することができます。

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

これは、Flexboxが既定で項目を水平に構成するので、各要素を水平に並べるのに十分です。 overflow-x: scroll;は、アイテムがWebページのサイズを変更することを防ぎ、コンテナを水平にスクロール可能にします。

残っているのは、画像を円形にすることです。これは簡単に行うことができます。

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

完了：私たちがしなければならないのは、画像の大きさそのものよりも大きいborder-radiusを追加することです。

.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>