CODEWITHSUNDEEP
phphtmlcss
matghazaryan
matghazaryan

Reputation: 5896

how to arrange images side by side

<div id="car">
    <div style="padding-left: 10px; padding-top: 20px;" class="photos">

        <?php if (count($photos) > 0) { foreach($photos as $photo) {
            ?>

            <div style="float: left; text-align: center; width: 78px; padding-right: 10px; padding-top: 5px;">
                <a rel="photos" href="images/cars/<?php echo $_GET["id"] . "/" . $photo; ?>" title="<?php echo $car->getTextByLanguage($lang->id)->value; ?>">
                    <img alt="" src="images/cars/<?php echo $_GET["id"] . "/small/" . $photo; ?>" width="100%">
                </a>
            </div>


            <?php  } } else { ?>
            No photos available.
        <?php } ?>
    </div>
</div>

I want arrange images side by side and each rows will have only 8 images. Any ideas how could I do this? I want to this like this: I should have one div and in that div shoud create 8 and so on...

Upvotes: 0

Views: 1983

Answers (2)

Bud Damyanov
Bud Damyanov

Reputation: 31839

Try to improve your code: get the total count first like this (it will speed up iterations in foreach cycle):

$count = count($photos);

Then use: if (($count) > 0) {...} Next try to find ($count % 8) - this is remainder of $count divided by 8, see http://php.net/manual/en/language.operators.arithmetic.php - if it is equal to zero or greater and then you can start to output the div again.

Upvotes: 1

David
David

Reputation: 1144

You can use .first class

set it in your style sheet:

.image {float:left;text-align:center;width:78px;padding-left:10px;padding-top:5px;} 
.first {clear:both;padding-left:0;}

And set it in your foreach code:

<?
$i=0;
foreach($photos as $photo) {
<div class='image <?=($i%7==0?"first":"");?>'>
...

Upvotes: 3

Related Questions