Как создать Div для заполнения строки?

Мы ищем решение для генерации DIV, если наши продукты не заполняют всю строку. Мы используем фильтр jQuery и сортируем плагин под названием MixItUp.Как создать Div для заполнения строки?

Есть ли решение JavaScript, которое распознает свободное пространство в строке и автоматически генерирует отсутствующий div для сохранения шаблона?

Посмотрите, где это должно иметь место: printnil.com

enter image description here

.container{ 
    text-align: justify; 
    font-size: 0.1px; 
    -webkit-backface-visibility: hidden; 
    float: left; 
    background: #fff; 
    width: 100%; 
} 

.container:after{ 
    content: ''; 
    width: 100%; 
    display: inline-block; 

} 

.container .mix, 
.container .gap{ 
    margin-bottom:1.5%; 
} 

.container .mix{ 
    display: none; 
} 

.container .mix:after{ 
    content: attr(data-myorder); 
    vertical-align: top; 
} 

.container .mix:before{ 
    content: ''; 
} 

.mix{ 
    text-align: justify; 
    display: inline-block; 
    width: 100%; 
    position: relative; 
    box-sizing: border-box; 
    background: #f2f2f2; 
} 

@media only screen and (min-width:568px){ 
.container .mix, 
.container .gap{ 
    width: 49.5%; 
    margin-bottom:1%; 
} 
} 

@media only screen and (min-width:1024px){  
.container .mix, 
.container .gap{ 
    width: 33%; 
    margin-bottom:0.5%; 
} 
}

источник

2015-01-19 Alexander H

почему вы не установить фон обертку на серый? затем используя белые границы для создания вашего изображения? – jbutler483

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

Я полагаю, что это результат, который вы ищете.

.container { 
 
font-size: 0.1px; 
 
background: #f2f2f2; 
 
width: 100%; 
 
} 
 

 
.container .mix { 
 
width: 33.33%; 
 
}

<div id="Container" class="container"> 
 
    <div class="mix" style="display: inline-block;"> 
 
    <img src="//cdn.shopify.com/s/files/1/0600/1373/products/agenda-cove_grande.jpg" alt="Agenda" height="100" width="100"/> 
 
    </div> 
 
    <div class="mix mappen" style="display: inline-block;"> 
 
    <img src="//cdn.shopify.com/s/files/1/0600/1373/products/agenda-cove_grande.jpg" alt="Agenda" height="100" width="100"/> 
 
    </div> 
 
    <div class="mix" style="display: inline-block;"> 
 
    <img src="//cdn.shopify.com/s/files/1/0600/1373/products/agenda-cove_grande.jpg" alt="Agenda" height="100" width="100"/> 
 
    </div> 
 
    <div class="mix" style="display: inline-block;"> 
 
    <img src="//cdn.shopify.com/s/files/1/0600/1373/products/agenda-cove_grande.jpg" alt="Agenda" height="100" width="100"/> 
 
    </div> 
 
    <div class="mix" style="display: inline-block;"> 
 
    <img src="//cdn.shopify.com/s/files/1/0600/1373/products/agenda-cove_grande.jpg" alt="Agenda" height="100" width="100"/> 
 
    </div> 
 
    <div class="mix" style="display: inline-block;"> 
 
    <img src="//cdn.shopify.com/s/files/1/0600/1373/products/agenda-cove_grande.jpg" alt="Agenda" height="100" width="100"/> 
 
    </div> 
 
    <div class="mix" style="display: inline-block;"> 
 
    <img src="//cdn.shopify.com/s/files/1/0600/1373/products/agenda-cove_grande.jpg" alt="Agenda" height="100" width="100"/> 
 
    </div> 
 
</div>

источник

2015-01-19 16:54:02

Как создать Div для заполнения строки?

ответ

Смежные вопросы