php - 让 Wordpress 在前面的静态页面上水平显示 3 个博客，而不是垂直显示

Question

第一次尝试这个，我知道我有些倒退或颠倒了。我觉得我的循环也有点困惑，因为每篇博客文章的样式都在变化。真奇怪。

不过，我的主要问题是如何让这些帖子水平显示而不是垂直显示？？我的循环搞砸了吗？是我的 CSS 问题(我的最佳猜测)。

Here is the div site

Here was my demo site for how I wanted it to turn out to look. 我只是展示这个网站，这样你就可以完全“直观地”理解我想要完成的事情。

这是我的代码。如果我能在这个问题上得到任何帮助，我将不胜感激，因为它让我很头疼。这是我第一次从头开始制作 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--> 

Answer 1

您需要在各个帖子周围放置某种类型的包装 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 一个宽度并 float 它们或显示 block ，但是你选择如何布局它们。抱歉，刚刚注意到您的演示站点，所以请尝试

.post-wrapping-div { width:33%; float: left; padding:0 20px; }