自适应布局

自适应布局

参考

单个盒子居中

js实现

（浏览器宽高-盒子宽高）/2

css实现

  • [x] 子元素不需知道宽高
  • 不兼容IE的低版本浏览器

  • 宽可父子元素可都设置%，但是父元素的高度必须是固定值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /*父元素*/
        width:100%;
    	height:500px;
    	position : relative;
    	
    /*子元素*/
        width:30%;
    	height:30%;
    	
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;

  • [x] 子元素需知道宽高

  • 兼容所有的浏览器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;//盒子宽高都200
    // position: absolute;
    // bottom: 50%;
    // right: 50%;
    // margin: 0 -100px -100px 0; //盒子宽高都200

多个盒子

float+宽度百分比

关键点：

  • [ ] 左右（前两个div）浮动（中间文档流）
  • [ ] 最后一个div（center）不设宽度，但保证了左右接连

  • [ ] 左右可设固定宽度也可设百分比（中间都能自适应）

  • [x] div布局 注意： right是第二个div向右浮动的元素

    1
    2
    3
    4
    5
    6
    7
    <div class="outer">
        <div class="inner">
            <div class="left">left</div>
            <div class="right">right放到第二个浮动</div> 
            <div class="center">center</div>
        </div>
    </div>

  • [x] css样式

    • [ ] 左浮动第一个div（left）

      1
      2
      float: left;
      width: 20%;

  • [ ] 右浮动第二个div（right）

    1
    2
    float: right; 
    width: 30%;

  • [ ] 中间定位：

    1
    margin: 0 30% 0 20%;//分别距离左右的百分比距离，中间不能设宽度

    源码 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <!-- <meta charset="utf-8"> -->
        <title>宽度自适应布局</title>
        <style>
        body,
        div {
            margin: 0;
            padding: 0;
        }
       
        .outer {
            height: 220px;
            padding:10px;
            border: 2px solid black;
            margin-left: 10%;
            margin-right: 10%;
        }
        .inner {
            height: 200px;
            padding:10px;
            border: 2px solid blue;
        }
        .left {
            height: 200px;
            border: 1px solid red;
            float: left;
            width: 20%;
           
        }
       .right {/*放到第二个*/
            height: 200px;
            border: 1px solid red;
            float: right;
            width: 30%;
           
        } 
        .center {
            height: 200px;
            border: 3px solid green;
            margin: 0 30% 0 20%; //不能设宽度 
        }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <div class="left">left</div>
                <div class="right">right放到第二个浮动</div>            
                <div class="center">center</div>
            </div>
        </div>
    </body>
    </html>

float+position ( 不好 )

关键点：

  • [ ] 三个div都浮动（中间的是position）
  • [ ] 中间一个div （center）必须设宽度%，左右不能接连

  • [ ] 左右不可设固定宽度

  • [x] div布局 注意： center是第二div（position）

    1
    2
    3
    4
    5
    6
    7
    <div class="outer">
        <div class="inner">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">right</div>
        </div>
    </div>

  • [x] css样式

    • [ ] 父元素inner 设置相对布局

      1
      position: relative;

    • [ ] 左浮动第一个div（left）

      1
      2
      float: left;
      width: 20%;

    • [ ] 中间定位：必须设宽度，和绝对定位

      1
      2
      3
      position: absolute; /*相当于也脱离文档流*/
      width:50%;          /*必须定宽度，但是不能忽略边框*/
      margin-left:20%;

    • [ ] 右浮动第二个div（right）

      1
      2
      float: right;
      width: 25%;

源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">    
    <title>宽度自适应布局2</title>
    <style>
    body,
    div {
        margin: 0;
        padding: 0;
    }
   
    .outer {
        height: 220px;
        padding:10px;
        border: 2px solid black;
        margin-left: 10%;
        margin-right: 10%;
    }
    .inner {
        height: 200px;
        padding:10px;
        border: 2px solid blue;
        position: relative;
    }
    .left {
        height: 200px;
        border: 1px solid red;
        float: left;
        width: 20%;
       
    }
   .center {/*放到第二个*/
        height: 200px;
        border: 3px solid green;
        position: absolute;/*相当于也脱离文档流*/
        width:50%; /*必须定宽度，但是不能忽略边框*/
        margin-left:20%;
        /*margin-right:25%;         */
    }
    .right {
        height: 200px;
        border: 1px solid red;
        float: right;
        width: 25%;
    } 
    
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">right</div>
        </div>
    </div>
</body>
</html>