如何使我的框 3 与框 2 的右侧对齐?

Question

我正在尝试让我的"这是框 3"与父容器内的"这是框 2"的右侧对齐。方框3和方框2是否应该重叠并彼此相邻？ 我尝试使用"显示：内联;但是，这无济于事。任何建议将不胜感激？

html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
width: 300px;
height: 600px;
border: 5px solid black;
padding: 20px;
margin: 0 auto;
}
.box1 {
height: 50%;
width: 90%;
border: 1px solid black;
padding-top: 10px;
margin: 0 auto;
text-align: center;
}
.box2 {
height: 50%;
width: 50%;
border: 1px solid blue;
text-align: center;
margin-top: 10px;
}
.box3 {
height: 50%;
width: 50%;
text-align: center;
border: 1px solid red;
float: right;
}

<div class="container">
<div class="box1"> this is box 1 </div>
<div class="box2"> this is box 2 </div>
<div class="box3"> this is box 3 </div>
</div>

Answer 1

将float: left添加到.box2，marign-top: 10px添加到.box3：

html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
width: 300px;
height: 600px;
border: 5px solid black;
padding: 20px;
margin: 0 auto;
}
.box1 {
height: 50%;
width: 90%;
border: 1px solid black;
padding-top: 10px;
margin: 0 auto;
text-align: center;
}
.box2 {
height: 50%;
width: 50%;
border: 1px solid blue;
text-align: center;
margin-top: 10px;
float: left;
}
.box3 {
height: 50%;
width: 50%;
text-align: center;
border: 1px solid red;
float: right;
margin-top: 10px;
}

<div class="container">
<div class="box1"> this is box 1 </div>
<div class="box2"> this is box 2 </div>
<div class="box3"> this is box 3 </div>
</div>

Answer 2

您可以在.container上将display: flex与flex-wrap: wrap一起使用：

html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 300px;
height: 600px;
border: 5px solid black;
padding: 20px;
margin: 0 auto;
text-align: center;
}
.box1 {
height: 50%;
width: 90%;
border: 1px solid black;
margin-bottom: 10px;
padding-top: 10px;
}
.box2,
.box3 {
height: 50%;
width: 50%;
}
.box2 {
border: 1px solid blue;
}
.box3 {
border: 1px solid red;
}

<div class="container">
<div class="box1"> this is box 1 </div>
<div class="box2"> this is box 2 </div>
<div class="box3"> this is box 3 </div>
</div>

Answer 3

您可以使用此代码

body {
margin: 0;
padding: 0;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.container {
width: 300px;
height: 600px;
border: 5px solid black;
padding: 20px;
margin: 0 auto;
}
.box1 {
height: 50%;
width:100%;
border: 1px solid black;
padding-top: 10px;
margin: 0 auto;
text-align: center;
}
.box2 {
height: 50%;
width: 50%;
border: 1px solid blue;
text-align: center;
float: left;
}
.box3 {
height: 50%;
width: 50%;
text-align: center;
border: 1px solid red;
float: right;
}

<div class="container">
<div class="box1"> this is box 1 </div>
<div class="box2"> this is box 2 </div>
<div class="box3"> this is box 3 </div>
</div>