如何解决移动端两栏自适应的问题

发表于 | 分类于

如何解决移动端两栏自适应的问题？overflow:hidden

要求：第一水平方向不要有滚动条；第二，水平第一个侧栏宽度固定，第二个侧栏宽度自适应

1 明确元素的宽度：块级元素 默认占据整行，如果不设置宽度，则默认和父元素等宽；行内块元素的宽度由内容决定，可以自行设置；行内元素的宽度由内容决定，不可设置宽高；

2 设置了浮动或者定位的层的宽宽由内容决定，发生元素转换，display:inline-block;

3 目的是实现 ：右边栏的宽度 = 屏幕宽度 - 左边栏宽度 ，以此来实现右边栏里面的内容进行百分比设置宽度以自适应屏幕的时候，是以 右边栏的宽度 = 屏幕宽度 - 左边栏宽度 为基准的。

4 注意理解块级元素的流体特性:在默认情况下(非浮动、定位)，块级元素会默认在水平方向自动填满外部的容器(自动填满父元素)。

5 浮动元素left和触发了BFC特性的元素right,right栏自适应，right设置overflow:hdden,触发BFC特性，即可实现right自动填充剩余的空间，而不是那种文字环绕图片的效果。

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
68
69
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <!--设置移动端视觉窗口，宽度和移动终端设备等宽-->
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .phone {
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #000000;
        }
        .left{
            width: 90px;
            height: 100%;
            float: left;
            background: red;
            overflow: hidden;
        }
        /*产出一个绝缘的盒子  别的浮动不影响它  它也不影响其他的浮动，
      左边盒子设置浮动，宽度固定*/
        /*bfc*/
       .right{
            height: 100%;
            background-color: skyblue;
            overflow: hidden;
        }
      /*可以点击绿色按钮，看下右边层的宽度，两种情况overflow:hidden 存在与否，overflow:hidden触发了BFC使其不会受浮动元素的影响，同时其也不会影响浮动元素
      overflow存在的时候，可使右边的盒子自动填充剩余的宽度，以实现自适应布局*/
        input  {
            display:block;
            height: 40px;
            width: 30px;
            background-color: green;
        }
        img{
            width: 50%;
          /*根据right的宽度为基准进行设置自身的宽度，以此来实现自适应布局*/
        }
    </style>
</head>
<body>
<div class="phone">
    <div class="left"></div>
    <div class="right">
        <input type="button"/>
        <img src="img/01.jpg" alt="" />
    </div>
</div>
<script>
    document.querySelector("input").onclick=function(){
        console.log("bingo");
            var right  = document.querySelector(".right")
            console.log(right.offsetWidth);
    };
</script>
</body>
</html>

6 注意：高潮来了，如何设置left和right之间的间隙呢？

  • 给right设置margin-right 或者 padding-left
1
2
3
4
.right {
  	margin-left:100px;
}
结果是left和right还是粘连在一起，不起作用，因为BFC元素设置margin-left和float元素混排是不起作用的
1
2
3
4
.right {
       	padding-left:20px;
     }
     这个会起作用，可以将两栏隔开一定的距离
  • 给left设置margin-right 或者 padding-right 来撑开两栏之间的间隙
1
2
3
4
5
.left {
  	padding-right:20px	;
或者
	margin-right:20px	;
}

7 BFC自适应布局的组件化代码

1
2
3
4
5
6
7
.left{
    float:left;
	   margin-right:20px;
}
.right {
  	overflow:hidden ;
}

8 如果是右边栏宽度固定，左边栏宽度自适应呢？

解析顺序不同会导致占位不同，所以只需要将右边写在左边前面即可

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
68
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <!--设置移动端视觉窗口，宽度和移动终端设备等宽-->
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .phone {
            /*width: 320px;*/
            /*height: 480px;*/
            width: 100%;
            height: 100%;
            position: absolute;
            border: 1px solid #000000;
        }
        .left{
            height: 100%;
            background-color: skyblue;
            overflow: hidden;
            /*两栏自适应留白*/
        }
        /*产出一个绝缘的盒子  别的浮动不影响它  它也不影响其他的浮动*/
        /*bfc*/
        .right{
            width: 90px;
            height: 100%;
            float: right  ;
            background: red;
        }
        /*右边盒子设置自适应的宽度*/
        input  {
            display:block;
            height: 40px;
            width: 30px;
            background-color: green;
            z-index: 999;
        }
        img{
            width: 50%;
        }
    </style>
</head>
<body>
<div class="phone">
    <div class="right">
        <input type="button"/>
    </div>
    <div class="left"></div>
</div>
<script>
    document.querySelector("input").onclick=function(){
        console.log("bingo");
        var right  = document.querySelector(".right")
        console.log("右边盒子宽度:"+right.offsetWidth);
    };
</script>
</body>
</html>