Отображение миниатюр сообщений 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; 
}