CODEWITHSUNDEEP
phpfor-loopcount
Airikr
Airikr

Reputation: 6436

Break into a new line after each 6th record

I want to break to a new line after each 6th record but it only breaks after 5th record and leaving the 6th record on a own line (see picture below).

for($i = 1; $i < 13; $i++) {
    echo '<div style="display: '.($i % 6 == 0 ? '' : 'inline-').'block; padding: 0 10px;"></div>';
}

enter image description here

What am I doing wrong here? How can I fix it?

Upvotes: 0

Views: 171

Answers (5)

Steve
Steve

Reputation: 20469

As per my comment, your logic is flawed as a block element will have 100% width.

Instead reduce the width of the container and leave all elements as inline-block:

<div id="infopage-prognosis" style="display: block; width:450px">
<?php for($i = 1; $i < 13; $i++) {
    echo '<div style="display: inline-block; padding: 0 10px;"></div>';
} ?>
</div>

Upvotes: 0

Cornel Raiu
Cornel Raiu

Reputation: 3005

set all the items with display:inline-block and after the 6th element add:

<div style="clear:both"></div>

tested it on your website and it worked

Upvotes: 1

user3522371
user3522371

Reputation:

It is normal you get that result, it is rather a mathematical logic:

  for($i = 1; $i < 13; $i++) {
        echo '<div style="display: '.($i % 7 == 0 ? '' : 'inline-').'block; padding: 0 10px;"></div>';                                   ^
    }

Upvotes: 0

Jure Špik
Jure Špik

Reputation: 331

The width of six clouds (with spacing) is probably more than the available space in the cloud container. Check for whitespaces or increase outer container width (or reduce padding)

Upvotes: 1

GautamD31
GautamD31

Reputation: 28753

You can try with 7

echo '<div style="display: '.(($i % 7 == 0) ? '' : 'inline-').'block; padding: 0 10px;"></div>';

Upvotes: 1

Related Questions