[英]How do I get my box 3 to align to the right of box 2?
I am trying to get my "this is box 3" to align to the right of "this is box 2" all inside the parent container.我试图让我的“这是框 3”与父容器内的“这是框 2”的右侧对齐。 Box 3 and Box 2 should overlap and be next to each other?
框 3 和框 2 应该重叠并彼此相邻? I have tried to use "display: inline; however that does not do anything. Any advice would be appreciated?
我曾尝试使用“显示:内联;但这并没有做任何事情。任何建议将不胜感激?
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>
Add float: left
to .box2
and marign-top: 10px
to .box3
:添加
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>
You can use display: flex
with flex-wrap: wrap
on the .container
:您可以在
.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>
You can use this code您可以使用此代码
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.