左边定宽，右边自适应

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         * {
 8             padding: 0;
 9             margin: 0;
10              color: #fff;
11              font-size: 30px;
12              font-weight: bold;
13              text-align: center;
14              box-sizing: border-box;
15          }
16          .left{
17              width: 200px;
18              height: 200px;
19              padding-top: 75px;
20              background: #5A6A94;
21          }
22          .right{
23              height: 200px;
24              padding-top: 75px;
25              background: #BE4F4F;
26          }
27      </style>
28  </head>
29  <body>
30      <!-- 左边定宽 -->
31      <div class="left">Left</div>
32      <!-- 右边自适应 -->
33      <div class="right">Right</div>
34  </body>
35  </html>

方法一：

1 .left{
2      float:left;
3 }
4 .right{
5      width:100%;           
6 }

方法二：

1 body{
2     display:flex;
3 }
4 .right{
5     flex:1;
6 }

方法三：

1 .left{
2     float:left;    
3 }
4 .right{
5     float:left;
6     width:calc(100% - 200px);
7 }

方法四：

首先需要修改页面结构

1 <div class="container">
2     <div class="right">Right</div>
3 </div>
4 <div class="left">Left</div>

设置样式：

 1 .container{
 2     float:left;
 3     width:100%;
 4 }
 5 .right{
 6     margin-left:200px;
 7 }
 8 .left{
 9     float:left;
10     margin-left:-100%;
11 }

方法五：

body{
    position:relative;
}
.left{
    position:absolute;
    left:0;
}
.right{
    margin-left:200px;
}

posted on 2017-06-14 17:46 人生如逆旅我亦是行人阅读(188) 评论(0) 编辑收藏举报