最近的帖子凌乱的wordpress

Question

I have a little problem with recent posts in a template what I'm developing

Screenshot

This is the original HTML code

<div class="main-news"> <!-- general post container -->

        <div class="new">
            <div class="new-content">
                <div class="new-image">
                    <img class="noselect" src="<?php bloginfo('template_directory');?>/images/new-03.jpg" alt="News" title="Llamado Al templo">
                </div>
                <div class="new-content-excerpt">
                    <h1>Llamado al Templo</h1>
                    <p>La Academia Jedi Chile llama a todos sus miembros a reunirse en el templo jedi para iniciar un periodo de entrenamiento y... </p>
                    <p class="entrada">Entrada por: Midtaurus | 15/03/2016 | <span class="mark">Comentarios(8)</span></p>
                </div>
            </div>
        </div>

    </div>

And this is the wordpress adaptation

<?php
    $recent_posts_query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => 3));

    while ($recent_posts_query->have_posts())
    {
    $recent_posts_query->the_post();
    ?>
<div class="main-news">
    <div class="new">
        <div class="new-content">
        <div class="new-image">
        <?php the_post_thumbnail();?>
    </div>
    <div class="new-content-excerpt">
    <h1><?php echo the_title(); ?></h1>
<?php the_excerpt();?>
    <p class="entrada">Entrada por: <?php the_author(); ?> | <?php echo the_date('d/m/y'); ?> | <span class="mark">Comentario/s</span></p>
</div>

    <?php
    }
    ?>
</div>
</div>
</div>

I'm kinda lost, I can't find what is the issue, tried different codes, but all do the same

Thanks for your time and have a nice new year :)

PS: In the HTML version when I duplicate the posts they don't mess up

Answer 1

The issue is HTML structure and curly bracket issue.

<?php
$recent_posts_query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => 3));

while ($recent_posts_query->have_posts()){
    $recent_posts_query->the_post(); ?>
    <div class="main-news">
        <div class="new">
            <div class="new-content">
                <div class="new-image"><?php the_post_thumbnail();?></div>
                <div class="new-content-excerpt">
                    <h1><?php echo the_title(); ?></h1>
                    <?php the_excerpt();?>
                    <p class="entrada">Entrada por: <?php the_author(); ?> | <?php echo the_date('d/m/y'); ?> | <span class="mark">Comentario/s</span></p>
                </div>    
            </div>
        </div>
    </div>
<?php } ?>

Would you please replace above code? I hope it's helpful for you.