如何在jQuery中排列位置绝对div答案

【问题标题】：How to arrange position absolute div in jQuery如何在jQuery中排列位置绝对div
【发布时间】：2017-05-25 11:03:44
【问题描述】：

您好，我想使用 jQuery 动态地将我的 div 排列为适合列的样式，就像附加的图像一样。我有一个父 div，里面可以有很多绝对位置的框。这些框具有相同的宽度，但高度会根据其中的数据而有所不同。我的 HTML 是

.container{
  max-width: 960px;
  margin: 0 auto;
  width: 100%;
  position: relative;
}
.box{
  border: 2px solid;
  width: 24%;
  margin: 5px;
  float: left;
}
.col-1,.col-6{
  height: 300px;
}
.col-2,.col-8{
  height: 400px;
}
.col-3,.col-5{
  height: 200px;
}
.col-4,.col-7{
  height: 300px;
}

<div class="container">
   <div class="box col-1">Block 1</div>
   <div class="box col-2">Block 2</div>
   <div class="box col-3">Block 3</div>
   <div class="box col-4">Block 4</div>
   <div class="box col-5">Block 5</div>
   <div class="box col-6">Block 6</div>
   <div class="box col-7">Block 7</div>
   <div class="box col-8">Block 8</div>
 </div>

Divs 安排：

【问题讨论】：

我们如何知道一列应该有多少个框？
我认为你的方法是错误的。这是一个 css 问题，而不是 jquery 问题。要么让你的盒子相对位置，宽度 44%，边距 2%，或者如果你想保持绝对位置，将溢出-y设置为自动并具有固定高度。
Masonry 也有助于查看。

标签： javascript jquery html css

【解决方案1】：

您可以尝试使用 Flexbox。只需制作容器的 css

<code>
.container{max-width: 960px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  max-height: 800px;
}
</code>

在此处查看 JSFiddle：https://jsfiddle.net/adamturner93/qo72dsuj/

【讨论】：

优秀。不过，设置高度是必不可少的。