假设有 3 个矩形 {1, 2, 3} 我希望矩形 1 位于左侧，矩形 2 位于矩形 1 下方，矩形 3 位于矩形 1 旁边。
.rect1{
width: 20px;
height: 20px;
float: left;
}
.rect2{
width: 20px;
height: 20px;
}
.rect3{
width: 40px;
height: 40px;
float: left;
}
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
我试过这个方法，但是矩形 3 漂浮在矩形 2 旁边而不是矩形 1 旁边。
最佳答案
让我们检查一下我的代码
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
.rect1{
width: 20px;
height: 20px;
float: none;
border:1px solid black;
}
.rect2{
width: 20px;
height: 20px;
border:1px solid white;
float:left;
}
.rect3{
width: 40px;
height: 40px;
float: left;
border:1px solid red;
margin-top: -22px;
}
</style>
</head>
<body>
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
</body>
</html>
关于html - 如何布局 3 个 div，使一个在 div 旁边，另一个在下面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40479223/