第一次尝试这个，我知道我有一些倒退或颠倒的东西。我有一种感觉，我的循环也有点混乱，因为样式会随着每篇博客文章而变化。这很奇怪。
但是，我的主要问题=如何让这些帖子水平显示而不是垂直显示？我的循环搞砸了吗？我的CSS是问题吗（我最好的猜测）。
这是div 站点
这是我的演示网站，我希望它看起来如何。我只是展示这个网站，以便您完全"直观地"理解我想要完成的任务。
这是我的代码。如果我能在这个问题上得到任何帮助，我们将不胜感激，因为它让我非常头疼。这是我第一次从头开始制作 Wordpress 模板，绝对是一种学习体验。
#blog_section {
float: none;
height: auto;
width: 100%;
position: relative;
top: 0px;
left: 0px;
z-index: 19;
margin-top: 0px;
margin-left: auto;
clear: none;
background-color: rgb(26, 26, 26);
min-width: 0px;
padding-top: 8%;
padding-bottom: 8%;
margin-right: auto;
padding-right: 5%;
padding-left: 5%;
}
.blog_image {
float: left;
width: auto;
max-width: 99.260651%;
height: auto;
color: rgb(0, 0, 0);
position: relative;
top: 0px;
left: 0px;
z-index: 21;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 0%;
clear: none;
margin-right: 0%;
display: block;
}
.home_blog_title_content {
float: left;
font-size: 1em;
width: 100%;
height: auto;
text-align: left;
font-weight: normal;
line-height: 1em;
margin-left: 0%;
margin-top: 0px;
margin-bottom: 5px;
clear: both;
min-height: 0px;
}
.home_text_title {
font-family: open-sans;
color: rgb(255, 255, 255);
line-height: 1em;
font-size: 1.4em;
font-weight: 600;
margin-bottom: 15px;
}
.home_text_content{
margin-top: 15px;
margin-bottom: 15px;
font-family: open-sans;
}
.home_text_content a {
color: rgb(99, 130, 140);
font-family: open-sans;
line-height: 1.35em;
font-size: .85em;
}
.home_text_content a:active {
color: rgb(57, 155, 187);
}
.home_text_content a:hover {
color: rgb(57, 155, 187);
}
.home_text_content p{
font-family: open-sans;
color: rgb(212, 211, 209);
line-height: 1.35em;
font-weight: 100;
font-size: .85em;
}<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div class="blog_posts_container">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<!-- Blog Thumbnail-->
<div class="blog_image image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s"><?php the_post_thumbnail('full'); ?></div>
<!-- Blog Post Date/time-->
<p class="post">
<span class="post_date">Posted <?php the_time('m/j/y g:i A') ?></span><br />
</p>
<!-- Blog Title-->
<p class="home_blog_title_content">
<span class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></span><br />
</p>
<!-- Blog Content-->
<div class="home_text_content">
<?php the_excerpt(); ?>
<a href="<?php the_permalink(); ?>">Read More</a></li>
</div>
<?php endwhile; ?>
<? endif; ?></div>
<?php wp_reset_postdata(); ?>
</div>
<!-- END BLOG CALL-OUT SECTION--> 您需要在各个帖子周围放置某种类型的包装div
<!-- BEGIN BLOG CALL-OUT SECTION-->
<div id="blog_section" class="clearfix">
<div id="Blog_array_posts_container" class="clearfix">
<?php
$rp_query = new WP_Query( 'showposts=3' );
if ( have_posts() ) : while ( $rp_query->have_posts() ) : $rp_query->the_post(); ?>
<div class="post-wrapping-div">
<div id="blog_image" class="image wow fadeIn" data-wow-duration=".5s" data-wow-delay=".5s">
<li><?php the_post_thumbnail('full'); ?><b/>
</div>
<p class="home_blog_title_content">
<div class="home_text_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?><br/></span>
</p>
<div class="home_text_content">
</div>
<?php the_excerpt('Read More...'); ?>
<a href="<?php the_permalink(); ?>">Read More</a></li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</ul>
<? endif; ?>
</div>
</div>
然后给该div 一个宽度并浮动它们或显示块，但您选择将它们布置。抱歉，刚刚注意到您的演示网站，请尝试
.post-wrapping-div { width:33%; float: left; padding:0 20px; }