How to add clearfix to every 3rd post in an sql string

Question

is there a way I can add .clearfix {clear:both;} to every third post from an sql string without messing up the order of posts? cause if you view the source on my page now, this is how each post would look (minus the sql stuff) I need to clear every 3rd post so that my rows line up right, but not sure how to do it. any help would be appreciated

    <div class="row block02">
                            <? **sql stuff**
                            ?>
    <div class="col-1-3">
        <div class="wrap-col">

            <a href="blog.php?post_id=<? echo($result_miniblog['post_id']); ?>"><img src="../images/<? echo($result_miniblog['image']); ?>" alt="<? echo($result_miniblog['image_alt']); ?>" /></a>
        <h2>    
            <a class="tag" style="color:#2980b9;" href="#"><? echo($result_miniblog['post_category']); ?></a>
            <a class="headline" href="blog.php?post_id=<? echo($result_miniblog['post_id']); ?>"><? echo($result_miniblog['post_title']); ?></a>
            <a class="byline" href="blah">
            <br />John Doe</a>
        </h2>
        </div>
    </div>

                            <?}?>

</div>

score 0 · Accepted Answer · edited May 23 '17 at 12:24

0

Within your sql stuff, you probably have an index (or can easily create one) to know which enumeration of the loop you are in currently. If the modulus of the index and your loop is zero, then you print the clearfix.

<? **sql stuff**

  $clearfix = ($your_sql_loop_index %3 === 0) ? 'clearfix' : '';
?>
<div class="col-1-3 <?php echo $clearfix; ?>">

edited May 23 '17 at 12:24

Community

1
1

answered Nov 23 '16 at 19:56

WEBjuju

5,797
4
27
36

if I have a DESC LIMIT 9,6" would that change anything? – Brandon Gallagher Nov 23 '16 at 20:08
I'm trying to solve this poroblem [grid out of place](http://stackoverflow.com/questions/40771433/responsive-divs-posts-on-my-site-dont-line-up) – Brandon Gallagher Nov 23 '16 at 20:12
you would get six rows starting from your 9th row. in your loop, your index should be unaware of that fact and simply counting up from 1. – WEBjuju Nov 23 '16 at 20:12
I added your suggestion, and although it worked, it didn't complete the problem like I thought it would. Could you look at this [Problem](http://stackoverflow.com/questions/40771433/responsive-divs-posts-on-my-site-dont-line-up). Thanks for your help – Brandon Gallagher Nov 23 '16 at 20:15

score 0 · Answer 2 · answered Nov 23 '16 at 20:22

You can also use pseudo element in css: :nth-child(3n+1) could be effective.

ul {
  list-style:none;
}
li {
  background:red;
  float:left;
}
li:nth-child(3n) {
  background:blue; 
}
li:nth-child(3n+1) {
  clear:both;
}

<ul>
 <li>ITEM 1</li>
 <li>ITEM 2</li>
 <li>ITEM 3</li>
 <li>ITEM 4</li>
 <li>ITEM 5</li>
 <li>ITEM 6</li>
 <li>ITEM 7</li>
 <li>ITEM 8</li>
 <li>ITEM 9</li>
 <li>ITEM 10</li>
 <li>ITEM 11</li>
 <li>ITEM 12</li>
 <li>ITEM 13</li>
 <li>ITEM 14</li>
 <li>ITEM 15</li>
 <li>ITEM 16</li>
 <li>ITEM 17</li>
 <li>ITEM 18</li>
 <li>ITEM 19</li>
 <li>ITEM 20</li>
 <li>ITEM 21</li>
</ul>

How to add clearfix to every 3rd post in an sql string

2 Answers2