Как вставить блок между другими?

Question

[kamisarlapsha]

Привет! Есть 3 блока banners-block, их необходимо вставлять между после каждого 12 product-layout. В каждой строке по 4 блока product-layout, получается после каждой 3 строчки. Проблема в том, что banners-block у него длина должна быть на всю ширину страницы, а product-layout обернуты в несколько div с шириной 1070px. Выставляются banners-block у меня в конце страницы. Заранее спасибо!

Вот код:

<div class="container">
<div class="row">
<div id="content">
<div class="products">
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<!--Вот тут должен быть блок-->
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<div class="product-layout">
</div>
<!--Вот тут должен быть блок-->
</div>
</div>
</div>
</div>
<!--Эти блоки нужно вставлять-->
<div class="banners-block">
</div>
<div class="banners-block">
</div>

Вот пример:

Comments

[alex]

почему js в тегах вопроса?

Answer 1

[Vadim]

Вам нужно изменить порядок вложенности контейнеров. Не всё оборачивать в .container, а каждую отдельную секцию продуктов:

<div id="content">
    <div class="products">
        <div class="container">
            <div class="row">
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
            </div>
        </div>
        <!--Вот тут должен быть блок-->
        <div class="container">
            <div class="row">
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
                <div class="product-layout"></div>
            </div>
        </div>
        <!--Вот тут должен быть блок-->
    </div>
</div>

Comments

[kamisarlapsha]

Но как это сделать, если у меня выводятся блоки <div class="product-layout"></div обработкой массива:

<div id="content">
    <div class="products">
        <div class="container">
            <div class="row">
<?php foreach ($products as $product) { ?>
<div class="product-layout"></div>
<?php } ?>
</div>
</div>
</div>
</div>

[kamisarlapsha]

Может сделать так ?

<div id="content">
        <div class="container">
            <div class="row">
<!--Тут остальное-->
</div>
</div>
</div>
 <div class="products" style="width:100%">
<?php foreach ($products as $product) { ?>
<div class="product-layout"></div>
<?php } ?>
</div>

И каждый 12 оборачивать в c помощью js

[Vadim]

kamisarlapsha, как-то вот так (код не проверял):

<div id="content">
    <div class="products">
        <?php 
            $sections = array_chunk($products, 12); // разбиваем массив продуктов на секции по 12 штук
            foreach ($sections as $section_products) { ?>

            <div class="container">
                <div class="row">

                    <?php foreach ($section_products as $product) { ?>
                        <div class="product-layout"></div>
                    <?php } ?>
                </div>
            </div>

            <!--Вот тут должен быть блок-->

            <?php } ?>
    </div>
</div>

[kamisarlapsha]

Vadim, Спасибо!