解决自适应的两栏布局方式

Posted on   |   In   |     |  

    今天也算是一个小需求吧，需要实现一下这个，自己简单摸索了一下，总结出了两种方法，实现这样的方法会用很多种，在这里自己也是仅仅列出自己构思的这两种记录下来，下面开始

首先是第一种方式-运用了文本环绕的概念

>      简单科普一下文本环绕的概念,文字环绕是Microsoft Office Word软件的一种排版方式,主要用于设置Word文档中的图片文本框、自选图形、剪贴画、艺术字等对象与文字之间的位置关系.一般包括四周型、紧密型、衬于文字下方、浮于文字上方、上下型、穿越型等多种文字环绕方式,上面这个文本环绕的概念是节选自百科。
>      下面列出实现现实需求中的思路：当文本在另一个容器当中，容器是overflow：hidden的时候。那么这个时候这个盒子就变成了一个绝缘的盒子，不去影响任何外部的元素并且内容使用剩余的宽度。下面简单列出，注意下面的代码仅供实例，丝毫不具备优化之类的思想，因为大家主要是了解这个布局思路即可。先附上一个简图
![layout](150429解决自适应的两栏布局方式/layout.png)
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,body {
      height: 100%;
    }

    .sidebar {
        width: 100px;
        height: 60%;
        float: left;
        background-color: orange;
    }
    .main {
        height: 100%;
        overflow: hidden;
        background-color: skyblue;
    }
    </style>
  </head>

  <body>
    <div class="sidebar"></div>
    <div class="main"></div>
  </body>

</html>

这样一个简单地侧边栏固定，中间宽度自适应的效果就实现了，下面来看第二种实现方式

方法二-利用绝对定位来实现

    主要是利用设置了绝对定位，也即是设置了position:absolute;这样当前元素就脱离了标准流，就不占位置了，接下来给右边盒子设置100%宽，再设置上padding-left为左边盒子的宽度即可实现；当然当遇到两端都有一个栏的情况下可以让其两端都为绝对定位，中间的盒子设置100%宽，那这样的话就需要左右padding把那两个盒子的宽给设置出来即可。下面列出实现代码：

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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
    }

    .sidebar1 {
        position: absolute;
        left: 0;
        width: 100px;
        height: 100%;
        background-color: orange;
    }

    .sidebar2 {
        position: absolute;
        top: 0;
        right: 0;
        width: 100px;
        height: 100%;
        background-color: orange;
    }

    .main {
        width: 100%;
        height: 100%;
        padding-left: 100px;
        padding-right: 100px;
        overflow: hidden;
        background-color: skyblue;
    }
    </style>
</head>

<body> //这里是列出了三栏的情况，两栏直接去掉一栏，在上面再对main的padding做一下修改即可
    <div class="sidebar1"></div>
    <div class="main"></div>
    <div class="sidebar2"></div>
</body>

</html>

结语

    其实这种布局在移动端布局还是比较常见，应用场景：有一栏或两栏宽固定，剩下的一栏宽度自适应;再次重申，这只是自己做的一个小结，也希望能帮助到有需要的人，当然对于大神来说，不喜勿喷，今天这个就到这里了。