Verwenden Sie Wordpress-Schleife, um Miniaturansicht und Auszug anzuzeigen

Question

Ich versuche, meine Schleife zu konfigurieren, um mein Thumbnail neben einer Schaltfläche "Lesen Sie mehr" und einen Auszug anzuzeigen. Ich habe gerade eine recht gute Sicht, aber das Problem ist, dass der Abstand zwischen den Posts nicht korrekt ist und wenn ich andere Textlängen verwende (z. B. weniger als 10 Wörter), sieht das Ergebnis nicht gut aus. habe ich den Code aus https://stackoverflow.com/a/37194017/6320176 die Schleife und meine Ausgangscode angezeigt werden und meine ganze CSS sieht wie folgt aus:

/* general */ 
 

 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background: #fff; 
 
    margin: 0; 
 
} 
 
#site-wrapper { 
 
    margin: 0 auto; 
 
    max-width: 1024px; 
 
    height: 100%; 
 
    background: #fff; 
 
    overflow: hidden; 
 
} 
 
/* main sections */ 
 

 
#header { 
 
    width: 100%; 
 
    height: 530px; 
 
    padding: 2%; 
 
} 
 
#main { 
 
    width: 70%; 
 
    height: 100%; 
 
    float: left; 
 
    padding: 2%; 
 
    margin-top: 40px; 
 
} 
 
#sidebar { 
 
    width: 24%; 
 
    height: 100%; 
 
    float: left; 
 
    padding: 1%; 
 
    margin-top: 40px; 
 
} 
 
#media { 
 
    clear: both; 
 
    height: 300px; 
 
} 
 
/* head section */ 
 

 
#logo { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.logo { 
 
    margin: 0 auto; 
 
    width: 160px; 
 
    height: 155px; 
 
} 
 
#row { 
 
    border-top: 3px solid rgb(250, 250, 250); 
 
    padding-left: 2%; 
 
    padding-right: 2%; 
 
    padding-top: 1%; 
 
    padding-bottom: 1%; 
 
    margin-top: 15px; 
 
} 
 
#navigation { 
 
    font-decoration: none; 
 
} 
 
#navigation ul { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    list-style-image: none; 
 
    text-align: center; 
 
} 
 
#navigation li { 
 
    display: inline; 
 
} 
 
#navigation a { 
 
    color: #454545; 
 
    font-family: montserrat, sans-serif; 
 
    font-size: 1em; 
 
    text-decoration: none; 
 
    font-weight: 300; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
    text-transform: uppercase; 
 
} 
 
#navigation a:hover { 
 
    color: #6990E8; 
 
} 
 
.distance { 
 
    margin-left: 30px; 
 
} 
 
/* regelt den Abstand zwischen den Nav-Elementen */ 
 

 
/* featured */ 
 

 
#featured { 
 
    background: #444444; 
 
    width: 100%; 
 
    height: 350px; 
 
} 
 
/* text declaration */ 
 

 
p { 
 
    font-size: 1em; 
 
    font-family: sans-serif, Arial; 
 
    color: #2A2A2A; 
 
} 
 
a { 
 
    font-size: 1em; 
 
    font-family: sans-serif, Arial; 
 
    color: #828282; 
 
    text-decoration: none; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
} 
 
a:hover { 
 
    color: #000; 
 
} 
 
h2 { 
 
    font-size: 1.6em; 
 
    font-family: sans-serif, Arial; 
 
    color: #2A2A2A; 
 
    font-weight: 300; 
 
} 
 
h2 a { 
 
    text-decoration: none; 
 
    color: #2A2A2A; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
} 
 
h2 a:hover { 
 
    color: #000; 
 
} 
 
h3 { 
 
    font-size: 1.5em; 
 
    font-family: sans-serif, Arial; 
 
    color: #2A2A2A; 
 
    font-weight: 300; 
 
} 
 
/* entry */ 
 

 
#thumbnail { 
 
    float: left; 
 
    margin-right: 20px; 
 
} 
 
/* footer area */ 
 

 
#footer-wrapper { 
 
    margin-top: 100px; 
 
    width: 100%; 
 
} 
 
#footer { 
 
    background: #282828; 
 
    height: 100px; 
 
    padding-top: 30px; 
 
} 
 
#footer p { 
 
    font-size: 0.9em; 
 
    font-family: sans-serif, Arial; 
 
    color: #B0B0B0; 
 
    text-align: center; 
 
} 
 
#footer a { 
 
    text-decoration: none; 
 
    color: #B0B0B0; 
 
    -o-transition: .3s; 
 
    -ms-transition: .3s; 
 
    -moz-transition: .3s; 
 
    -webkit-transition: .3s; 
 
    transition: .3s; 
 
} 
 
#footer a:hover { 
 
    color: #fff; 
 
}

<main id="main"> 
 

 
    <article id="post"> 
 

 

 

 
    <!-- loop --> 
 

 

 
    <div id="thumbnail"> 
 
     <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0369-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0369 FINAL" /> 
 
    </div> 
 

 
    <h2><a href="http://localhost/2016/05/12/beitrag-6-the-last/">Beitrag 6</a></h2> 
 
    <div class="entry"> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p> 
 
    </div> 
 
    <a href="http://localhost/2016/05/12/beitrag-6-the-last/">Weiterlesen...</a> 
 

 

 
    <div id="thumbnail"> 
 
     <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0293-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0293 FINAL" /> 
 
    </div> 
 

 
    <h2><a href="http://localhost/2016/05/12/beitrag-5-ohne-picture/">Beitrag 5</a></h2> 
 
    <div class="entry"> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p> 
 
    </div> 
 
    <a href="http://localhost/2016/05/12/beitrag-5-ohne-picture/">Weiterlesen...</a> 
 

 

 
    <div id="thumbnail"> 
 
     <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0282-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0282 FINAL" /> 
 
    </div> 
 

 
    <h2><a href="http://localhost/2016/05/12/beitrag-4-servus/">Beitrag 4</a></h2> 
 
    <div class="entry"> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p> 
 
    </div> 
 
    <a href="http://localhost/2016/05/12/beitrag-4-servus/">Weiterlesen...</a> 
 

 

 
    <div id="thumbnail"> 
 
     <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0524-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0524 FINAL" /> 
 
    </div> 
 

 
    <h2><a href="http://localhost/2016/05/12/beitrag-3-hi/">Beitrag 3</a></h2> 
 
    <div class="entry"> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p> 
 
    </div> 
 
    <a href="http://localhost/2016/05/12/beitrag-3-hi/">Weiterlesen...</a> 
 

 

 
    <div id="thumbnail"> 
 
     <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0282-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0282 FINAL" /> 
 
    </div> 
 

 
    <h2><a href="http://localhost/2016/05/12/beitrag-2-hallo/">Beitrag 2</a></h2> 
 
    <div class="entry"> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p> 
 
    </div> 
 
    <a href="http://localhost/2016/05/12/beitrag-2-hallo/">Weiterlesen...</a> 
 

 

 
    <div id="thumbnail"> 
 
     <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0524-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0524 FINAL" /> 
 
    </div> 
 

 
    <h2><a href="http://localhost/2016/05/12/beitrag-1-mut-interesante/">Beitrag 1</a></h2> 
 
    <div class="entry"> 
 
     <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea 
 
     takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, [&hellip;]</p> 
 
    </div> 
 
    <a href="http://localhost/2016/05/12/beitrag-1-mut-interesante/">Weiterlesen...</a> 
 

 

 
    <!-- end of the loop --> 
 

 

 
    </article> 
 

 
</main>

Wie kann ich das Problem lösen?

Answer 1

Was ich denke, dass Sie versuchen zu erreichen, wird gemeinhin als "media object" bezeichnet, ein Bild mit Text daneben. Dies kann heutzutage mit flexbox erstellt werden, ein Beispiel kann here angesehen werden.

Fügen Sie alle Miniaturansichten, Kopfzeilen, Einträge und Hyperlinks, die zum selben Artikel gehören, in ein Umbruchelement ein. Dann folge dem Beispiel von dem oben erwähnten Link.

Als eine Randnotiz bemerkte ich, dass Sie id="thumbnail" verwenden, während IDs nur einmal pro Seite verwendet werden sollten, verwenden Sie stattdessen lieber class="thumbnail".

Dies ist ein Beispiel dafür, wie ich Ihre Seite kodieren würde.

HTML:

<article> 
    <div class="thumbnail"> 
    <img width="150" height="150" src="http://localhost/wp-content/uploads/M-Jiasmin-LeMeridien-0369-FINAL-150x150.jpg" class="attachment-thumbnail wp-post-image" alt="M - Jiasmin LeMeridien 0369 FINAL" /> 
    </div> 
    <div class="entry"> 
    <h2><a href="http://localhost/2016/05/12/beitrag-6-the-last/">Beitrag 6</a></h2> 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, ...</p> 
    <p><a href="http://localhost/2016/05/12/beitrag-6-the-last/">Weiterlesen...</a></p> 
    </div> 
</article> 

CSS:

article { 
    display: flex; 
} 

.entry { 
    flex: 1; 
} 

Dies sollte Ihr Layout von der Suche chaotisch verhindern. Flexbox ist eine großartige Lösung für diese Art von Problemen und wird heutzutage von Browsern häufig unterstützt.