Styling von Inline-Bildern und Bildunterschriften

Der folgende Code dient als Abschnitt, der es einem Benutzer ermöglicht, horizontal durch einen Host von Bildern zu blättern. Ich möchte Text unter jedem Bild platzieren. Ich habe ernsthafte Schwierigkeiten dies zu tun und würde für alle sugestions sehr dankbarStyling von Inline-Bildern und Bildunterschriften

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

Sie

Quelle

2017-03-17 Harry Houston

Geben Sie eine [mcve] bitte. Wir brauchen kein PHP, aber wir brauchen Ihr CSS. – j08691

Flexbox zur Rettung Vielen Dank im Voraus!

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>

Quelle

2017-03-17 16:53:28 Brad

Bitte fügen Sie eine Erklärung hinzu, warum/wie dieser Code dem OP hilft. Dies wird helfen, eine Antwort zu liefern, von der zukünftige Zuschauer lernen können. Weitere Informationen finden Sie unter [diese Meta-Frage und ihre Antworten] (http://meta.stackoverflow.com/q/256359/215552). –

Das war ein Leckerbissen du bist ein verdammt guter Mann Brad. Prost –

Froh, dass es geholfen hat. Bitte antworte auch :-) – Brad

Ich sehe Ihren Code. Und ich weiß genau was du willst. Also kopiere ich diesen Code direkt aus einem meiner Projekte.

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

Sie sehen es eine schöne transparente Beschriftung und einen Gruppennamen hat. Eigentlich erstelle ich es für eine mobile App-Schnittstelle, aber ich zeigte die width, height, background-image Blöcke und Bildunterschriften background-color.

TIPP: Im Körperabschnitt auf der Linie "62" ist .block-scroller die Eltern der Lochcodes.
In Zeile "63" #scroller ist die div, die die gescrollte div enthält.
On line "64" #scrolled-parent hat die Lochbilder mit seinen Beschriftungen darin und es ist der einzige div, der scrollt.
Und die .scrolled Blöcke sind die Bilder mit den Beschriftungen.

Quelle

2017-03-17 20:27:40

Styling von Inline-Bildern und Bildunterschriften

Antwort

Verwandte Themen