你好我想用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>
分区安排:
答案 0 :(得分:3)
您可以尝试使用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/