如何在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的安排：

来源

2017-05-25 Hafiz Muhammad Ali

我们怎么知道应该多少盒是在一列？ – Gerard

我认为你的方法是错误的。这是一个CSS问题，而不是一个jQuery的问题。或者让你的方块位置相对，宽度为44％，边距为2％，或者如果你想保持位置绝对设置溢出-y为自动并且具有固定的高度。 –

[砌体]（https://masonry.desandro.com/）以及将有助于看看。 – Bakudan

您可以尝试使用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/

来源

2017-05-25 11:15:00 adamturner

优秀。虽然设置高度是必不可少的。 – Gerard

如何在jQuery中安排绝对div的位置

回答

相关问题