<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.f-box {
float: left;
width: 150px;
height: 90px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
border: 3px solid red;
}
</style>
</head>
<body>
<h2>The Old Way - using float</h2>
<div class="f-box">Floating box1</div>
<div class="floating-box">Floating box2</div>
<div class="floating-box">Floating box3</div>
<div class="floating-box">Floating box4</div>
<div class="floating-box">Floating box5</div>
<div class="floating-box">Floating box6</div>
<div class="floating-box">Floating box7</div>
<div class="floating-box">Floating box8</div>
<div class="after-box">Another box, after the floating boxes...</div>
</body>
</html>CSS:我怎样才能使不同高度和相同宽度的盒子在 div 中完美排列，这样 box6 将位于 box1 之下，并且与 box6 同一列的所有盒子将跟随其顶部位置。看起来像这样的东西
最佳答案
将所有 floating-box 包裹在一个具有 display:flex; 的 div 中，然后使用 flex-wrap:wrap; 属性。
您可以将它们的宽度设置为百分比 width:15%; 或类似的，这样在任何屏幕尺寸下，一行中只有固定数量的 div。
.floating-box {
float: left;
width: 150px;
height: 75px;
margin: 10px;
border: 3px solid #73AD21;
}
.f-container{
display:flex;
margin:0;
padding:0;
flex-wrap:wrap;
}
.f-box {
float: left;
width: 150px;
height: 90px;
margin: 10px;
border: 3px solid #73AD21;
}
.after-box {
clear: left;
border: 3px solid red;
}<h2>The Old Way - using float</h2>
<div class="f-container">
<div class="f-box">Floating box1</div>
<div class="floating-box">Floating box2</div>
<div class="floating-box">Floating box3</div>
<div class="floating-box">Floating box4</div>
<div class="floating-box">Floating box5</div>
<div class="floating-box">Floating box6</div>
<div class="floating-box">Floating box7</div>
<div class="floating-box">Floating box8</div>
</div>
<div class="after-box">Another box, after the floating boxes...</div>关于CSS:我怎样才能让不同高度和相同宽度的盒子完美地排列在div中，这样box6就会在box1下面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41341325/