Javascript jQuery可排序：避免项目之间的间隙（左浮动）_Javascript_Jquery_Jquery Ui

Javascript jQuery可排序：避免项目之间的间隙（左浮动）

javascript jquery jquery-ui

Javascript jQuery可排序：避免项目之间的间隙（左浮动）,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,使用float：左我想从图像1转到图像2 我现在拥有的是：致：您能给我一些如何避免gap的灵感吗？我已经使用jQuery同位素得到了结果。这样很容易在空白处设置间距： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-2.2.0.js"><

使用

float：左我想从图像1转到图像2
我现在拥有的是：

致：

您能给我一些如何避免gap的灵感吗？
我已经使用jQuery同位素得到了结果。这样很容易在空白处设置间距：
<!doctype html>
<html lang="en">
  <head>
     <meta charset="utf-8">
     <script src="https://code.jquery.com/jquery-2.2.0.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.js"></script>
  </head>
<body>

<div class="grid">
  <div class="grid-item item-size-A">1</div>
  <div class="grid-item item-size-C">2</div>
  <div class="grid-item item-size-D">3</div>
  <div class="grid-item item-size-B">4</div>
  <div class="grid-item item-size-A">5</div>
  <div class="grid-item item-size-C" style="height: 150px">6</div>
  <div class="grid-item item-size-C">7</div>
  <div class="grid-item item-size-B">8</div>
  <div class="grid-item item-size-A">9</div>
  <div class="grid-item item-size-A">10</div>
  <div class="grid-item item-size-D">11</div>
  <div class="grid-item item-size-C">12</div>
  <div class="grid-item item-size-B">13</div>
  <div class="grid-item item-size-A">14</div>
  <div class="grid-item item-size-C">15</div>
</div>
<style>
  * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }

  body {
      font-family: sans-serif;
  }

  .grid {
      background: #DDD;
      max-width: 900px;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      padding: 0;
      font-size: 50px;
      font-weight: 900;
  }

.grid:after {
    content: '';
    display: block;
    clear: both;
}

.grid-item {
    float: left;
}

.item-size-A {
    background-color: red;
    width: 100px;
    height: 150px;
}
.item-size-B {
    background-color: blue;
    width: 200px;
    height: 150px;
}
.item-size-C {
    background-color: yellow;
    width: 100px;
    height: 300px;
}
.item-size-D {
    background-color: green;
    width: 300px;
    height: 300px;
}
</style>
<script>
$(document).ready( function() {

    $('.grid').isotope({
        itemSelector: '.grid-item',
        masonry: {
            columnWidth: 100
        }
    });

});
</script>


</body>
</html>


1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
* {
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.电网{
背景：DDD；
最大宽度：900px；
宽度：100%；
身高：100%；
保证金：0自动；
填充：0；
字体大小：50px；
字号：900；
}
.网格：之后{
内容：''；
显示：块；
明确：两者皆有；
}
.表格项目{
浮动：左；
}
.项目尺寸A{
背景色：红色；
宽度：100px；
高度：150像素；
}
.项目-size-B{
背景颜色：蓝色；
宽度：200px；
高度：150像素；
}
.项目-C{
背景颜色：黄色；
宽度：100px；
高度：300px；
}
.项目-size-D{
背景颜色：绿色；
宽度：300px；
高度：300px；
}
$（文档）.ready（函数（）{
$（'.grid'）。同位素({
itemSelector:“.grid项”，
砌体：{
列宽：100
}
});
});

你好像和一把私人小提琴有联系。