如何布置3个div，一个在div旁边，另一个在下面?

lets say there are 3 rectangles {1, 2, 3} I want rectangle 1 to be on the left, rectangle 2 to be underneath rectangle 1 and rectangle 3 to be beside rectangle 1.

假设有三个矩形{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>

I have tried this method but rectangle 3 is floating beside rectangle 2 instead of rectangle 1.

我尝试过这个方法，但是矩形3是浮动在矩形2而不是矩形1。

4 个解决方案

#1

You can do this with wrapping .rect1 & .rect2 div in one div with float:left fixed width.

您可以在一个带有浮动的div中使用.rect1 & .rect2 div。

.rect-left{
  float:left;
  width: 20px;
}
.rect1{
   width: 20px;
   height: 20px;
   float: left;
   background:red;
}
.rect2{
   width: 20px;
   height: 20px;
   background:blue;
   float: left;
}
.rect3{
   width: 40px;
   height: 40px;
   float: left;
   background:green;
}

<div class="rect-left">
  <div class="rect1">
  </div>
  <div class="rect2">
  </div>
</div>
<div class="rect3">
</div>

#2

let's check this my code

让我们检查一下我的代码。

<!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>

#3

You could try wrapping .rect1 and .rect2 together, as in this example: http://codepen.io/rebagliatte/pen/ObVgdX

您可以尝试将.rect1和.rect2结合在一起，就像在这个例子中一样:http://codepen.io/rebagliatte/pen/ObVgdX。

#4

You can do it without using float. just give margin left and top for the div you want to align:

您可以在不使用float的情况下实现它。只给你想要对齐的div留出空白和顶部:

 .rect1{
 width: 20px;
 height: 20px;
 background-color:Red;
}
.rect2{
width: 20px;
height: 20px;
background-color:black;
}
.rect3{
 width: 20px;
 height: 20px;
 margin-left: 20px;
 margin-top: -40px;
 background-color:blue;
}

#1