Displaying WordPress post thumbnails horizontally

Question

I'm struggling to display thumbnails horizontally. Can't figure out why they stack. Here's the code in 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;?>

I would think they would display inline, but they don't. Ultimately, the goal is to have them in rows of three, but I suppose that's a question for another day, and there are a few solutions to that scattered around SO.

I've tried solving via CSS but a variety of attempts (as well as no styling at all) still returns a vertical stack of thumbnails. Thanks for any time you take helping...

Answer 1

You may achieve this by using css only, Add wrapper with specific class on you images or add directly to <img>

Suppose adding wrapper to images

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

Now just add css,

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