如何在jQuery中安排绝对div的位置
问题描述:
你好,我希望我的div可以像附加的图片一样动态地使用jQuery来安排列样式。我有一个父母的div,里面可以有很多绝对位置的盒子。这些盒子具有相同的宽度,但高度会根据它们中的数据而变化。我的HTML是如何在jQuery中安排绝对div的位置
.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>
Div的安排:
答
您可以尝试使用Flexbox的。只要让你的容器
<code>
.container{max-width: 960px;
margin: 0 auto;
width: 100%;
position: relative;
display: flex;
flex-flow: column wrap;
max-height: 800px;
}
</code>
的CSS一见这里的jsfiddle:https://jsfiddle.net/adamturner93/qo72dsuj/
+0
优秀。虽然设置高度是必不可少的。 – Gerard
我们怎么知道应该多少盒是在一列? – Gerard
我认为你的方法是错误的。这是一个CSS问题,而不是一个jQuery的问题。或者让你的方块位置相对,宽度为44%,边距为2%,或者如果你想保持位置绝对设置溢出-y为自动并且具有固定的高度。 –
[砌体](https://masonry.desandro.com/)以及将有助于看看。 – Bakudan