这是我的
这就是我想要完成的
<!doctype html>
<html>
<head>
<style>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display: inline-block;
}
</style>
</head>
<body>
<div style="height:200px;" class="card">1</div>
<div style="height:240px;" class="card">2</div>
<div style="height:200px;" class="card">3</div>
<div style="height:270px;" class="card">4</div>
<div style="height:300px;" class="card">5</div>
<div style="height:250px;" class="card">6</div>
</body>
</html>最佳答案
你需要这样尝试-
只需使用下面的脚本 -
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
.card{
background-color: aqua;
border-radius: 10px;
width: 30%;
margin: 1% 1%;
display:inline-flex;
vertical-align:top;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<div class=" grid js-masonry">
<div style="height:200px;" class="card grid-item">1</div>
<div style="height:240px;" class="card grid-item">2</div>
<div style="height:200px;" class="card grid-item">3</div>
<div style="height:270px;" class="card grid-item">4</div>
<div style="height:300px;" class="card grid-item">5</div>
<div style="height:250px;" class="card grid-item">6</div>
</div>关于html - 如何垂直插入div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34529398/