博客文章 WordPress 定制

Question

我正在从头开始创建自己的自定义主题，运行遇到了一些麻烦。在博客页面上，每次显示一个新的post，它都比上一个小。这是因为我将博客 post 的宽度设置为 33.3%。此外，每个博客 post 都显示在前一个博客的右侧。如何让每个博客 post 占内容区域的 33.3% 并并排显示，每行 3 个？我正在使用 wordpress 函数调用每个博客 post。我只显示博客 post 的缩略图，当您单击缩略图时，它会将您带到 post。所以基本上是 3 张并排的图片。

[奖励]：如何让文本在悬停在每个博客 post 图片上时水平和垂直显示？

我知道这个问题很多，但我已经尝试了好几天了。 JS Fiddle 或 Codepen 将不胜感激。

Index.php:

<?php get_header(); ?>
        <div class="blog-posts">
             <?php while (have_posts()) : the_post(); ?>
                 <div id="page-content">   
                     <a href="<?php the_permalink(); ?>">
                         <?php the_post_thumbnail(); ?>
                             <h3><?php the_title(); ?></h3>
                                 </a>   
                                     <?php endwhile; ?>   
                 </div>             
       </div>
<?php get_footer(); ?>

Answer 1

您应该使用 bootstrap 并执行如下操作：

<?php get_header(); ?>
        <div class="blog-posts">
             <?php while (have_posts()) : the_post(); ?>
                 <div class="col-md-4">
                     <div id="page-content">   
                         <a href="<?php the_permalink(); ?>">
                             <?php the_post_thumbnail(); ?>
                             <h3><?php the_title(); ?></h3>
                         </a>   
                     </div>
                 </div>  
             <?php endwhile; ?>           
       </div>
<?php get_footer(); ?>

注意移除 width: 33.33%; CSS 规则并在循环中关闭你的 <div> 标签，而不是之后。

希望对您有所帮助

[编辑]

有关如何将列类与 bootstrap 一起使用的更多信息，请参阅此 link：grid example basic

[编辑 #2]

没有 bootstrap 也可以，但会有点困难。您必须将 "display" 设置为 "inline-block" 并设置 div 的宽度，同时注意这些标签的继承边距。在此示例中，我必须将其设置为 32%。这是 fiddle

博客文章 WordPress 定制

Blog Posts Wordpress Customizing

html

css

php

wordpress

position