三栏式布局

最新推荐文章于 2024-01-21 13:37:53 发布

文甜心

最新推荐文章于 2024-01-21 13:37:53 发布

阅读量315

点赞数

分类专栏： css布局基础文章标签： html css 布局

本文链接：https://blog.csdn.net/qq_34893429/article/details/59511438

版权

css布局基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1、绝对定位法
这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

绝对定位法下的css代码：

.left, .right{
    position:absolute; 
    top:0; 
    width:200px; 
    height:100%; 
}
.left{
    left:0; 
    background:blue; 
}
.right{
    right:0; 
    background:red; 
}
.content{
    margin: 0 210px; 
    background: yellow; 
    height:100%； 
}

HTML代码为：
绝对定位法的HTML代码

<div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="content"></div>
</div>

这里的左中右三个div的顺序是可以任意调整的，这与剩下的两种方法就不一样了，需要注意一下。

此方法的优点是，理解容易，上手简单，受内部元素影响而破坏布局的概率低，就是比较经得起折腾。
缺点在于：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。然而，一般情况下，除非用户显示器分辨率宽度>=1600像素，否则用户不会把浏览器缩小到1000像素以下的，所以该缺陷危害指数3.

2、自身浮动法（流体布局）
此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

css代码如下：
自身浮动法css代码

.container {
            position: relative;
            margin: 20px;
            padding: 20px;
            background-color: #eee;
            border: 1px solid #999;
            height: 100%;
        }

.left {
    position: relative;
    width: 160px;
    float: left;
    background-color: #fff;
    border: 1px solid #999;
    padding: 20px
}

.right {
    /* position: relative; */
    width: 80px;
    float: right;
    background-color: #fff;
    border: 1px solid #999;
    padding: 20px
}

.content {
    position: relative;
    margin-left: 222px;
    margin-right: 142px;
    background-color: #fff;
    border: 1px solid #999;
    padding: 20px
}

.clearfix:after {
    display: block;
    content: '';
    height: 0;
    clear: both;
}

.clearfix {
    zoom: 1;
}

HTML代码：
自身浮动法的HTML代码

<div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="content"></
</div>

这里三个div标签的顺序的关键是要把主体div放在最后，左右两栏div顺序任意。

此方法的优点是：代码足够简洁与高效
不足在于：中间主体存在克星，clear:both属性。如果要使用此方法，需避免明显的clear样式。

3、margin负值法(双飞翼布局)
这种方法是在实际的网站中应用的最多的，我个人感觉多少有些跟风的嫌疑。此方法很难用一句话概括。首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动（本例左浮动，下面所述依次为基础），内层div为真正的主体内容，含有左右210像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

见下面的css代码：
margin负值定位方法的css代码

.container{
    width:100%;
    height:100%; 
    float:left; 
}
.container .content{
    margin: 0 210px; 
    background: yellow; 
    height:100% 
}
.left,.right{
    width:200px; 
    height:100%; 
    float:left; 
    background:blue; 
}
.left{
    margin-left:-100%; 
}
.right{
    margin-left:-200px; 
}

HTML代码：

<div class="container">
        <div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>

您需要注意几个div的顺序，无论是左浮动还是右浮动，先是主体部分div，这是肯定的，至于左右两栏谁先谁后，都无所谓，我测试了IE6，Firefox，以及chrome浏览器，表现一致。

此方法的优点：三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。
缺点在于：相对比较难理解些，上手不容易，代码相对复杂。出现百分比宽度，过多的负值定位，如果出现布局的bug，排查不易。
优先加载主体

4、圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .container {
        margin-left: 120px;
        margin-right: 220px;
    }
    .main {
        float: left;
        width: 100%;
        height: 300px;
        background-color: red;
    }
    .left {
        float: left;
        width: 100px;
        height: 300px;
        margin-left: -100%;
        position: relative;
        left: -120px;
        background-color: blue;
    }
    .right {
        float: left;
        width: 200px;
        height: 300px;
        margin-left: -200px;
        position: relative;
        right: -220px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

优先加载主体。

5. Flex 布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .container {
            display: flex;
    }
    .main {
            flex-grow: 1;
        height: 300px;
        background-color: red;
    }
    .left {
        order: -1;
        flex: 0 1 200px;
        margin-right: 20px;
        height: 300px;
        background-color: blue;
    }
    .right {
        flex: 0 1 100px;
            margin-left: 20px;
        height: 300px;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
    </div>
</body>
</html>

6、BFC 三栏布局

BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-right: 20px;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: right;
        margin-left: 20px;
        background-color: blue;
    }   
    .main {
        height: 200px;
        overflow: hidden;
        background-color: green;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
</html>

文甜心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三栏式布局

1、绝对定位法这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。绝对定位法下的css代码（不再赘述）HTML代码为：绝对定位法的HTML代码<div class="container"> <div class="left"></div> <div clas
复制链接

扫一扫