0
「詳細を読む」ボタンと抜粋の横にサムネイルを表示するようにループを設定しようとしています。私は今、かなり良い意見を持っていますが、問題は、投稿間の距離が正しくないことと、異なるテキストの長さ（たとえば10単語未満）を使用すると結果が良く見えないことです。 私はループと私の出力コードを表示するhttps://stackoverflow.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>
正確には何ですか？ – danish