如果我们的产品不能填满整个行,我们正在寻找一种解决方案,以生成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/

10-12 12:46
查看更多