Text von der Bildseite in das untere Bild verschieben

Ich möchte den Titel der Posts unter dem Thumbnail des Posts verschieben, während alle 3 Posts in derselben Zeile bleiben. Das scheint eine ziemlich einfache Sache zu sein, aber ich kann die richtige Kodierung nicht herausfinden. Wenn jemand helfen könnte, würde ich es sehr schätzen.

Bild von dem, wie es aussieht (Ich möchte den Beitragstitel unter der Bildminiatur sehen) Bildbeschreibung hier eingeben

verwandte-posts.php

   

css

 .related-posts-title { text-transform: uppercase; font-family: 'Montserrat', sans-serif; font-size: 12px; letter-spacing: 1px; } .related-posts-image img { height:259px; width:400px; } .relatedthumb { display: inline-block; } .relatedcontent { display: inline-block; } 

Solutions Collecting From Web of "Text von der Bildseite in das untere Bild verschieben"

Ihr Problem ist nicht WP-spezifisch, aber um Ihr gewünschtes Layout zu erreichen, ändern .relatedcontent einfach den .relatedcontent Stil zu:

 .relatedcontent { display: block; } 

Sie müssen .relatedthumb und .relatedcontent innerhalb eines li Containers .relatedcontent und floaten, und dann die display: inline-block; entfernen display: inline-block; von den zwei classn.

html:

  
  • CSS:

     ul { display: inline; } ul li { float: left; list-style: none; padding: 0 2px; } .relatedthumb { display: block; } .relatedcontent { display: block; } 

    Demo hier: https://jsfiddle.net/MatteoMnz/ndq8d2ud/