flex布局让两个div盒⼦排成⼀⾏布局⼀般使⽤flex布局，position设置布局
现在float可以减少使⽤，可以MDN搜索相关资料学习
flex布局让两个div盒⼦排成⼀⾏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#main{
width:800px;
height:300px;
border: solid black 1px;
display:flex;
display:-webkit-flex;
}
#one{
-webkit-flex:1;
html的flex布局
flex:1;
height:50%;
background-color: yellow;
}
#two{
height:50%;
-webkit-flex:1;
flex:1;
background-color: red;
}
#three{
height:50%;
-webkit-flex:1;
flex:1;
background-color: green;
}
</style>
</head>
<body>
<div id="main">
<div id="one">
盒⼦⼀
</div>
<div id="two">
盒⼦⼆
</div>
<div id="three">
盒⼦三
</div>
</div>
</body>
</html>
总结就是给⽗盒⼦ display:flex； ⼀盒⼦和⼆盒⼦等等分别 flex: 1 就可以
部分引⽤ blog.csdn/qq_22855325/article/details/72874906

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。