Используйте цикл Wordpress для отображения эскиза и выдержки

Question

Я пытаюсь настроить мой цикл, чтобы показать мой снимок рядом с кнопкой «читать дальше» и выдержкой. У меня сейчас все в порядке, но проблема в том, что расстояние между сообщениями неверно, и если я использую разные текстовые длины (например, менее 10 слов), результат выглядит не очень хорошо. я использовал код из https://stackoverflow.com/a/37194017/6320176 для отображения цикла и мой выходной код и весь мой CSS выглядит следующим образом:

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

Как я могу исправить это?

Answer 1

Я думаю, что вы пытаетесь достичь, обычно называется «media object», изображение с текстом рядом с ним. В настоящее время это можно создать с помощью flexbox, пример можно посмотреть here.

Поместите все миниатюры, заголовок, запись и гиперссылку, которые принадлежат к одной и той же статье в элементе обертки. Затем следуйте примеру из ссылки, упомянутой выше.

В качестве побочного элемента я заметил, что вы используете id="thumbnail", в то время как идентификатор должен использоваться только один раз на странице, поэтому вместо этого используйте class="thumbnail".

Это пример того, как я буду кодировать вашу страницу.

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

Это должно предотвратить макет от поиска неаккуратно. Flexbox - отличное решение для таких проблем и широко поддерживается браузерами в настоящее время.