Как динамически вывести данные в блоки разной ширины и содержания?

Question

[zurabyan11]

Здравствуйте. Есть такой блок с эллементами разной ширины. Каждый 1-ый и 6-ой блок большие и с большим контентом чем в остальных. Нужно вывести данные из базы в формате указанном на фото. Прямое решение или код мне не нужен. Мне нужна подсказка к решению.

Answer 1

[ThunderCat]

бутстрап -
кол 6 кол 4 кол 4
кол 4 кол 4 кол 6
картинки либо в бэкграунд и ковер, либо просто ковер во флекс.

Comments

[zurabyan11]

Верстка есть. Нужно подгружать данные из php

[ThunderCat]

zurabyan11, И в чем проблема? Запрос в бд, достали данные, цикл - вывели...

[zurabyan11]

ThunderCat, если выводить в цикле все блоки получтся одинаковыми. Даже если выводить четными и не четными не будет такой формы как в картинке.

[Сергей]

если у тебя всегда 6 блоков, ни больше, ни меньше, то можно тупо в нужное место html-разметки подставлять нужные данные...
например есть массив $blocks[], то в нужном мести выводи значения
$blocks[0]['title'] и $blocks[0]['text'] (допустим для первого блока)
$blocks[5]['title'] и $blocks[5]['text'] ( для последнего блока)

конечно лучше делать через цикл, как писали выше, но так понятней для новичка (но геморройней в плане дальнейшей поддержки)

[zurabyan11]

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

[Сергей]

zurabyan11, выложи сюда разметку блоков и стили, посмотрим

[ThunderCat]

zurabyan11, цикл + счетчик, когда счетчик == 0 или 5 кол будет 6, в остальных 4

[zurabyan11]

<div class="announcement-widget m-0">
    
    <div class="annonBlock-1">
        <div class="row m-0">
            <div class="col-xl-6 announcement-item-big-tile p-0" id="announTilebg" data-background="/images/test/q.jpg">
                <div class="announTitleBlock-big">
                    <h6 class="announTitle">Անձնային աճ. ճանաչիր և ակտիվացրու ներքին ռեսուրսներդ</h6>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
            <div class="col-xl-3 announcement-item p-0" id="announTilebg" data-background="/images/test/g.jpg">
                <div class="announTitleBlock">
                    <h6 class="announTitle">Անձնային աճ. ճանաչիր և ակտիվացրու ներքին ռեսուրսներդ</h6>
                </div>
            </div>
            <div class="col-xl-3 announcement-item p-0" id="announTilebg" data-background="/images/test/g.jpg">
                <div class="announTitleBlock">
                    <h6 class="announTitle">Անձնային աճ. ճանաչիր և ակտիվացրու ներքին ռեսուրսներդ</h6>
                </div>
            </div>
            <div class="col-xl-3 announcement-item p-0" id="announTilebg" data-background="/images/test/g.jpg">
                <div class="announTitleBlock">
                    <h6 class="announTitle">Անձնային աճ. ճանաչիր և ակտիվացրու ներքին ռեսուրսներդ</h6>
                </div>
            </div>
            <div class="col-xl-3 announcement-item p-0" id="announTilebg" data-background="/images/test/g.jpg">
                <div class="announTitleBlock">
                    <h6 class="announTitle">Անձնային աճ. ճանաչիր և ակտիվացրու ներքին ռեսուրսներդ</h6>
                </div>
            </div>
            <div class="col-xl-6 announcement-item-big-tile p-0" id="announTilebg" data-background="/images/test/q.jpg">
                <div class="announTitleBlock-big">
                    <h6 class="announTitle">Անձնային աճ. ճանաչիր և ակտիվացրու ներքին ռեսուրսներդ</h6>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>
        </div>
    </div>
</div>

[zurabyan11]

ThunderCat, попробую. Спасибо.