两栏，三栏布局

三栏布局

1 <div class="parentBox">
2   <div class="leftbox"></div>
3   <div class="centerbox"></div>
4   <div class="rightbox"></div>
5 </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 .centerbox{
12     float: left;
13     width: calc(100% - 600px);
14     height: 600px;
15     background: green;
16 }
17 .rightbox{
18     float: left;
19     width: 300px;
20     height: 600px;
21     background: blue;
22 }

定位方法：

 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 .centerbox{
14     position: absolute;
15     left: 300px;
16     right: 300px;
17     /* width: calc(100% - 600px); */
18     height: 600px;
19     background: green;
20 }
21 .rightbox{
22     position: absolute;
23     right: 0;
24     width: 300px;
25     height: 600px;
26     background: blue;
27 }

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 .centerbox{
13     flex: 1;
14     /* width: calc(100% - 600px); */
15     height: 600px;
16     background: green;
17 }
18 .rightbox{
19     width: 300px;
20     height: 600px;
21     background: blue;
22 }

 

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