スタイリングインラインイメージとキャプション

次のコードは、ユーザーが画像のホストを水平方向にスクロールできるセクションとして機能します。私は、各画像の下にテキストを配置したい。私は深刻なトラブルにこれをやってたことだし、任意のsugestionsのために非常に感謝されるスタイリングインラインイメージとキャプション

<div class="favored" style="background-color: #F8FFFA;overflow-x:scroll; white-space: nowrap;" > 
    <span> 
     <img id='<?echo $user_id;?>' src="<?echo$image_path?>"> 
     <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption> 
    </span> 
    <span> 
     <img id='<?echo $user_id;?>' src="<?echo$image_path?>"> 
     <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption> 
    </span>  <span> 
     <img id='<?echo $user_id;?>' src="<?echo$image_path?>"> 
     <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption> 
    </span>  <span> 
     <img id='<?echo $user_id;?>' src="<?echo$image_path?>"> 
     <caption for="<?echo $user_id?>" style='position: bottom;'><?echo$first_name?></caption> 
    </span> 
</div>

救助に事前に

出典

2017-03-17 Harry Houston

投稿する[mcve]してください。 PHPは必要ありませんが、CSSが必要です。 – j08691

Flexboxをありがとう！

ul { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
ul li { 
 
    width: 350px; 
 
    text-align: center; 
 
    margin: 5px; 
 
}

<ul> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <p>caption</p> 
 
    </li> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <p>caption</p> 
 
    </li> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <p>caption</p> 
 
    </li> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <p>caption</p> 
 
    </li> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <p>caption</p> 
 
    </li> 
 
    <li> 
 
    <img src="http://placehold.it/200x100"> 
 
    <p>caption</p> 
 
    </li> 
 

 
</ul>

出典

2017-03-17 16:53:28 Brad

このコードがOPに役立つ理由/方法の説明を追加してください。これにより、今後の視聴者からの回答が得られます。詳細については、[このメタ質問とその回答]（http://meta.stackoverflow.com/q/256359/215552）を参照してください。 –

それはあなたが善良な男Bradであるという扱いをしました。乾杯。 –

喜んで助けました。回答も受け入れてください:-) – Brad

私はあなたのコードを参照してください。そして私はあなたが望むものを正確に知っています。だから私は自分のプロジェクトの一つから直接このコードをコピーします。あなたはそれは素敵な透明キャプションとグループ名を持つ参照

<!DOCTYPE HTML> 
 

 
<html> 
 

 
<head> 
 
    <title>Untitled</title> 
 
    <style type="text/css"> 
 

 
     .block-scroller { 
 
      width: 100%; 
 
      height: 49.5vw;  /* It should has it */ 
 
      clear: both; 
 
      margin: 0.5% 0; 
 
     } 
 

 
     #scroller { 
 
      width: 100%; 
 
      height: 39.5vw;  /* It should has it */ 
 
      overflow-x: scroll;  /* It make the block scroll */ 
 
     } 
 

 
     #scrolled-parent { 
 
      width: 300%;  /* It should has it */ 
 
      height: 100%; 
 
     } 
 

 
     .scrolled { 
 
      width: calc(98.5%/6) !important;  /* 98.5% means the 100% - "all of the scrolled blocks margins" and 6 means the six block that we add in html */ 
 
      height: 100%; 
 
      margin: 0 0.125%; 
 
      float: left; 
 
      background: url(http://placehold.it/600x500) black no-repeat center /cover; 
 
     } 
 

 
     .scrolled p { 
 
      width: 100%; 
 
      line-height: 10vw; 
 
      background: rgba(255, 0, 0, 0.7);  /* The background color of captions */ 
 
      color: white; 
 
      font-family: sans-serif; 
 
      text-align: center; 
 
      font-size: 1em; 
 
      margin: 0; 
 
     } 
 

 
     p#class-title { 
 
      width: 100%; 
 
      line-height: 10vw; 
 
      background: rgba(0, 0, 0, 0.7); 
 
      color: white; 
 
      font-family: sans-serif; 
 
      text-align: center; 
 
      font-size: 1em; 
 
      margin: 0; 
 
     } 
 

 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <div class="block-scroller"> 
 
     <div id="scroller"> 
 
      <div id="scrolled-parent"> 
 
       <div id="class301" class="scrolled"><p>301</p></div> 
 
       <div id="class302" class="scrolled"><p>302</p></div> 
 
       <div id="class303" class="scrolled"><p>303</p></div> 
 
       <div id="class304" class="scrolled"><p>304</p></div> 
 
       <div id="class305" class="scrolled"><p>305</p></div> 
 
       <div id="class306" class="scrolled"><p>306</p></div> 
 
      </div> 
 
     </div> 
 
     <p id="class-title">Class</p> 
 
    </div> 
 

 
</body> 
 

 
</html>

。実際にはモバイルアプリのインターフェース用に作成しましたが、ブロックとキャプションのwidth,height、background-imageとbackground-colorを示しました。

ヒント： "62"行の本文セクションで.block-scrollerはホールコードの親です。
オンライン "63" #scrollerはdivがスクロールされたdivです。
オンラインで "64" #scrolled-parentにはキャプションが入ったホールイメージがあり、スクロールするのはdivです。
そしてブロック.scrolledはキャプション付きの画像です。

出典

2017-03-17 20:27:40

スタイリングインラインイメージとキャプション

答えて

関連する問題