我正在尝试使“ this is box 3”(我的“这是方框3”)与父容器内的“ this is box 2”的右边对齐。方框3和方框2应该重叠并且彼此相邻吗?我尝试使用“ display:inline;但是不做任何事情。任何建议将不胜感激?
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>
将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>
您可以将display: flex
与flex-wrap: wrap
上的.container
一起使用:
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>
您可以使用此代码
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>