@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>


Вот пример:
5bdc0fb5c82b5429246728.png
  • Вопрос задан
  • 102 просмотра
Решения вопроса 1
sankooo
@sankooo
Software Engineer
Вам нужно изменить порядок вложенности контейнеров. Не всё оборачивать в .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>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы