html - 使用 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"，而每页只能使用一次 id，因此请改用 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 是解决这类问题的好方法，现在得到了浏览器的广泛支持。