Последние записи

made in programmersforum 3

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

17th
Мар

Как правильно делать автоматическое создание столбцов с картинками в виде таблицы

Posted by obzor under php

Сделал автоматическое создание столбцов из базы данных, но нужно чтобы после 4 картинок дальше переходило на ряд ниже и так далее. Как правильно это сделать?

Andkorol

Примерно так:

Код:


<style type="text/css">
    .wrapper{
        width: 800px;
        height: auto;
    }
    .row-block{
        width: 100%;
        height: auto;
        float: left;
    }
    .item-block{
        width: 160px;
        height: auto;
        float: left;
        margin-left: 20px;
    }
    .lorem{
        margin: 10px 0 15px;
        text-align: center;
    }
</style>

<div class="wrapper">
    <div class="row-block">
    <?php
    $i = 0; // переменная-счетчик цикла
    $in_row = 4; // количество блоков в ряду
    while($i < 12){ // ($art = mysqli_fetch_assoc($articles)) в твоём случае
        if(($i > 0) && ($i % $in_row) == 0){
            echo '</div><div class="row-block">'; // создаём новый ряд
        }
    ?>
        <div class="item-block">
            <img src="http://lorempixel.com/output/nature-q-c-160-130-<?= rand(1, 8); ?>.jpg">
            <div class="lorem">
                <a href="#">Lorem ipsum.</a>
            </div>
        </div>
    <?php
        $i++; // увеличиваем переменную-счетчик
    }
    ?>
    </div>
</div>