水平顯示WordPress帖子縮略圖

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; 
}