两栏布局

html
1 <div class="parentBox">
2     <div class="leftbox"></div>
3     <div class="rightbox"></div>
4 </div>

浮动布局

 1 .parentBox{
 2     width: 100%;
 3     height: 600px;
 4 }
 5 .leftbox{
 6     float: left;
 7     width: 300px;
 8     height: 600px;
 9     background: red;
10 }
11 .rightbox{
12     margin-left: 300px;
13     height: 600px;
14     background: blue;
15 }

 

定位布局

 1 .parentBox{
 2     position: relative;
 3     width: 100%;
 4     height: 600px;
 5 }
 6 .leftbox{
 7     position: absolute;
 8     left: 0;
 9     width: 300px;
10     height: 600px;
11     background: red;
12 }
13 .rightbox{
14     margin-left: 300px;
15     height: 600px;
16     background: blue;
17 }

 

弹性盒模型flex布局

 1 .parentBox{
 2     display: flex;
 3     justify-content: space-between;
 4     width: 100%;
 5     height: 600px;
 6 }
 7 .leftbox{
 8     width: 300px;
 9     height: 600px;
10     background: red;
11 }
12 .rightbox{
13     flex: 1;
14     height: 600px;
15     background: blue;
16 }

 

posted @ 2021-06-01 17:18  shuaibijian  阅读(73)  评论(0)    收藏  举报