Question

我正在努力水平显示缩略图。无法弄清楚他们堆叠的原因。这是相关代码：

        <?php $pages = get_posts('meta_key=top&meta_value=yes&sort_order=ASC&post_type=page&numberposts=9');    ?>

        <?php foreach ($pages as $post) : ?>

                <?php setup_postdata($post); ?><a href="<? the_permalink(); ?>"><img src="<?php bloginfo('url');?>/wordpress/wp-content/images/<?php echo(get_post_meta($post->ID, 'film_img', $single = true));?>" alt="<?php echo(get_post_meta($post->ID, 'film_brief', $single = true));?>" /></a>


        <?php endforeach;?>

我认为他们会显示内联，但他们不会。最终，我们的目标是让它们排成三排，但我认为这是另一天的问题，并且有一些解决方案可以分散在SO周围。

我尝试通过CSS解决，但各种尝试（以及根本没有样式）仍然返回垂直堆栈的缩略图。感谢您随时帮助......

Answer 1

您可以通过仅使用css来实现此目的，在图像上添加具有特定类的包装，或直接添加到<img>

假设为图像添加包装

<?php foreach ($pages as $post) : ?>
      <div class="my-post-thumb">
                <?php setup_postdata($post); ?><a href="<? the_permalink(); ?>"><img src="<?php bloginfo('url');?>/wordpress/wp-content/images/<?php echo(get_post_meta($post->ID, 'film_img', $single = true));?>" alt="<?php echo(get_post_meta($post->ID, 'film_brief', $single = true));?>" /></a>
      </div> 
<?php endforeach;?>

现在只需添加css，

.my-post-thumb{
    float:left;
    /*or*/
    display:inline-block;
}

水平显示WordPress后缩略图

1 个答案: