Question

I’m working on wordpress query_posts. I want to show 12 posts on the index page,3 items in a row. So I want to have a “clear:both” css on the first item of each row. How can I do that please?

<?php query_posts(array('showposts' => 9, 'post_parent' => $post->ID, 'post_type' => 'page', 'order' => 'ASC')); ?>
<div>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div> <!-- clear class on each 4th item -->
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </div>
    <?php endif; ?>
</div>
<?php wp_reset_query(); ?>

Answer 1

<?php query_posts(array('showposts' => 9, 'post_parent' => $post->ID, 'post_type' => 'page', 'order' => 'ASC')); ?>
<div>
    <?php $i = 0; $attr = " class='clear_float'"; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <div<?php if(($i++)%3 == 0) {echo $attr;} ?>> <!-- clear class on each 4th item -->
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </div>
    <?php endif; ?>
</div>
<?php wp_reset_query(); ?>

I added 2 lines.

<?php $i = 0; $attr = " class='clear_float'"; ?>

and

<div<?php if(($i++)%3 == 0) {echo $attr;} ?>> <!-- clear class on each 4th item -->

===== UPDATED =====

To add 3rd item class, I would suggest adding class to all items, for simplicity and even more control

To do so, before the loop:

$i = 0;

Inside the div in the loop:

<div class="item-<?php echo (($i++) % 3) + 1 ?>">

So that, for each line, the first item has class = item-1, the 3rd item has class = item-3