三栏布局与两栏布局_bootstrap实现网格布局中号窗口显示三栏布局,小号窗口实现二栏布局

作者：小小林熬夜学编程 | 2024-05-18 10:05:05

踩

bootstrap实现网格布局中号窗口显示三栏布局,小号窗口实现二栏布局

一.两栏布局,左边定宽

//html
<div id="left">左边定宽</div>
<div id="right">右边自适应,前端前端前端前端前端前端前端前端前端前端</div>1
2
3

1.

#left{
    float: left;
    width: 200px;
    margin-right: -200px;
    height: 50%;
    background: green;
}
#right{
    float: left;
    margin-left: 210px;
    width: 100%;
    height: 50%;
    background: red;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14

#left{
    width:200px;
    height: 50%;
    position: absolute;
    background: red;
}
#right{
    height: 50%;
    width: 100%;
    margin-left: 200px;
    background: yellow;
}1
2
3
4
5
6
7
8
9
10
11
12

#left{
    width: 200px;
    background: red;
    float: left;
    height: 50%;
}
#right{
    width: 100%;
    margin-left:210px;
    background: pink;
    height: 50%;
}1
2
3
4
5
6
7
8
9
10
11
12

二. 三栏布局,中间自适应

1.圣杯布局

html:
    <div class="container">
        <div class="middle">
            中间
        </div>
        <div class="left">
            左侧
        </div>
        <div class="right">
            右侧
        </div>
    </div>
    <div class="footer">
        尾部
    </div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

css:
        .container {
            padding: 0 220px 0 220px;
            overflow: hidden;
        }
        .left,
        .middle,
        .right {
            position: relative;
            float: left;
            // 多列等高
            margin-bottom: -2000px;   
            padding-bottom: 2000px;
        }
        .left {
            margin-left: -100%;
            left: -200px;
            width: 200px;
            background: red;
        }
        .right {
            margin-left: -220px;
            right: -220px;
            width: 220px;
            background: green;
        }
        .middle {
            width: 100%;
            background: blue;
        }
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

2.通过positon定位实现三栏布局中间自适应.

将父元素设置为position:relative.
左边元素:position:absolute;
left:0;
top:0;
右边元素:positon:absolute;
right:0;
top:0;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度.

3.浮动法

将左边元素设置为左浮动:float:left;
将右边元素设置为右浮动:float:right;
中间元素:margin-left:左边元素的宽度;
margin-right:右边元素的宽度.
中间元素会自动居中
注意的是:html中,中间元素必须写在最后！否则不能居中.

4.margin负值法(双飞翼)

<body>
       <div id="main">
           <div class="content"></div>(content包含在main中)
       </div>
       <div id="left"></div>
       <div id="right"></div>
</body>1
2
3
4
5
6
7

下面是css样式：
#main {float:left;width:100%;} .content {margin:0 200px;height:100%;background:red;} #left{float:left;width:200px;margin-left:-100%;background:blue;} #right{float:left;width:200px;margin-left:-200px;background:green;}
用main将content包起来，然后浮动，content利用margin向两边空出距离，让左右元素进来。左右元素都是左浮动.
当一个元素margin-left：的距离等于他自身的距离的负值时，他就会移动到上一层，right块元素就会移动到main的最右边.
当一个元素margin-left:的距离等于负100%(也就是body的长度)，他就会移动到上一层的最左边。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/587828