使用Wordpress循环显示缩略图和摘录
问题描述：
我尝试配置我的循环以在“阅读更多”按钮和摘录旁显示我的缩略图。我现在有一个相当好的看法，但问题是帖子之间的距离不正确，如果我使用不同的文本长度（例如少于10个字），结果看起来不太好。 我使用的代码从https://*.com/a/37194017/6320176显示环和我的输出代码和我的整个CSS是这样的：使用Wordpress循环显示缩略图和摘录
/* 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, […]</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, […]</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, […]</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, […]</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, […]</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, […]</p>
</div>
<a href="http://localhost/2016/05/12/beitrag-1-mut-interesante/">Weiterlesen...</a>
<!-- end of the loop -->
</article>
</main>我该如何解决呢？
答
我认为你试图实现的通常被称为'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是解决这些问题的绝佳解决方案，并受到当今浏览器的广泛支持。
你到底想要什么？ – danish