如果我们的产品不能填满整个行,我们正在寻找一种解决方案,以生成DIV。我们正在使用一个名为MixItUp的jQuery过滤器和排序插件。
是否有JavaScript解决方案可识别行中的可用空间并自动生成缺少的div来维护模式?
看看应该在哪里进行:printnil.com
.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%;
}
}
最佳答案
我想这就是您要寻找的结果。
.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>
关于javascript - 如何生成一个Div来填充一行?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28028923/