样式内嵌图像和标题

以下代码充当允许用户水平滚动浏览大量图像的部分。我想将文字放在每张图片的下面。我有严重的麻烦，这样做的，将不胜感激任何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

我看到你的代码。我完全知道你想要什么。所以我直接从我的一个项目中复制这些代码。

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

回答

相关问题