Разрыв эллемента (имитация тоже сойдет)

@MakcNmyc · Регистрация: 07.07.2012

Author24 — интернет-сервис помощи студентам

Здравствуйте. Хочу разместить блоки как на картинке. Где в синем блоки расположены маленькие красные блоки-товары. Мне собственно надо вставить зеленый блок с рекламой. При этом высота блоков товаров известна, высота блока рекламы тоже, но не известно количество блоков товаров в строке. Единственное что я придумал это абсолютным позиционированием разместить нужный блок, а потом скриптом резделить нужную добавить блок-пробел между нужными рядами товаров. Но ~~мне лень писать скрипт~~ решение какое-то не изящное и хотелось бы услышать умных мыслей и правильных решении.

@dzendev · 27.06.2016, 18:36

Может подойдёт

PHP/HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            width: 500px;
            margin: 0 auto;
        }
        .block{
            border: 2px solid red;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 50px;
            float: left;
            margin: 5px;
        }
        .banner{
            border: 2px solid yellow;
            float: left;
            clear: both;
            height: 100px;
            width: 440px;
            margin: 5px;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
        <div class="block">Товар</div>
    </div>
    <script>
        (function () {
            var blocks = document.querySelectorAll('.wrap > .block'),
                block8;
                // Если кол-во блоков больше 8 ставим рекламу после 8-го блока
                if(blocks.length > 8) {
                    block8 = blocks[8];
                // если меньше то после 4-ого
                } else {
                    block8 = blocks[4];
                }
                block8.insertAdjacentHTML("beforeBegin", '<div class="banner">Реклама</div>');
        })();
    </script>
</body>
</html>

Демонстрация http://codepen.io/anon/pen/jrBEmO

@MakcNmyc 3 / 3 / 2 Регистрация: 07.07.2012 Сообщений: 116
		1
	Разрыв эллемента (имитация тоже сойдет) 27.06.2016, 15:07. Показов 582. Ответов 1 Метки нет (Все метки) Здравствуйте. Хочу разместить блоки как на картинке. Где в синем блоки расположены маленькие красные блоки-товары. Мне собственно надо вставить зеленый блок с рекламой. При этом высота блоков товаров известна, высота блока рекламы тоже, но не известно количество блоков товаров в строке. Единственное что я придумал это абсолютным позиционированием разместить нужный блок, а потом скриптом резделить нужную добавить блок-пробел между нужными рядами товаров. Но ~~мне лень писать скрипт~~ решение какое-то не изящное и хотелось бы услышать умных мыслей и правильных решении. Миниатюры 0

	27.06.2016, 18:36