页面布局中的三列布局

好好生活呀
1,416 阅读3分钟

三列布局实现的方法有:

  1. 经典三列布局：定位实现三列布局，浮动实现三列布局。
  2. 圣杯实现三列布局
  3. 双飞翼实现三列布局

那么什么叫做三列布局呢？

主要是两侧定宽，中间自适应，就是说把一个人看成页面，头、脚，手固定，胸膛看成最中间的部分，当你胖起来的时候，最明显的部位就是腰特别粗大。换句话说，左右手固定了，但身体是可大可小。

实现三列布局最基本的要求:（）

  1. 两边列宽度固定,中间列自适应
  2. 中间列内容完整显示
  3. 中间列优先加载

下面我们来看第一个定位实现三列布局（left,right,middle文档流顺序没关系）

image.png

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    height: 500px;

}
#left,#right{
    width: 200px;
    height: 100%;
    background: pink;
}
#left{
    position: absolute;
    left: 0;
    top: 0;
}
#right{
    position: absolute;
    right: 0;
    top: 0;
}
#middle{
    margin: 0 200px;
}

把left和right给个定位和宽度200，高度和父容器高度一样（height：100%）,middle给个距离left和right的（margin：auto 200px）宽度就行

缺点：

怎么说呢？超过高度就会占用right的空间（其实我不太明白为什么不会占用left的空间） 看下图：

image.png

浮动实现三列布局

image.png

*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: red;
}
#middle{
    height: 200px;
    background: green;
    /* overflow-y:scroll */
}
#left{
    float:left;
}
#right{
    float:right;
}

把left设置在左边（float：left）再把right设置在右边（float：right)。 html代码要注意一下，文档流是从上往下，从左往右读，如果把middle设置在left和right中间，就会出现下图

image.png

因为left设置左浮属性：导致没有宽度的middle会被文档流先读取就会沾满一行，把right挤下来。所以要先给读取float和right也就是下图：

image.png 还有就是如果设置滚动条：滚动条就会占用位置right的位置

image.png

圣杯实现三列布局

image.png

先看看源码的实现：

image.png css：

*{
    margin: 0;
    padding: 0;
}
.wrap{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}
#middel,#left,#right{
    float: left;
}
#content{
    overflow: hidden;
    padding: 0 200px;
}
#middel{
    background: red;
    width: 100%;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: pink;
}
#left{
    margin-left: -100%;
    position: relative;
    left: -200px;
}
#right{
    margin-right:-200px
    /* margin-left: -200px; */
    /* position: relative;
    left: 200px; */
}

注意一下我们在这里设置了一个overflow:hidden(这本来是一个超出则截断，但在这里我们形成了一个BFC区域：至于什么是BFC区域，等我弄明白再发一篇关于BFC区域的文章)如果不这样设置就会出现塌陷，看下图：

image.png 我们的footer就和上一块重叠了。 那个position：relative是相对自身本来位置进行定位，所以margin-left：-100%是看下图

image.png 这个百分比是以父元素内容长度的百分比，该父元素内容长度需要去除padding magin border。由于长度设置为了100%，需要一整行的宽度补偿margin，则移到最左边。 （可能很难以理解）

缺点就是：圣杯布局下，如果某一列内容过多，文字会溢出。

image.png

双飞翼三列布局 双飞翼和圣杯布局都必须以middle作为文档流先读取（就是说把middle放在left和float前面）。

image.png

先看看html的实现：

<body>
    <div class="wrap">
        <div id="header">header</div>

        <div id="content">
            <div id="middle">
                <div class="middle-inner" >middle</div>
            </div>
            <div id="left">left</div>
            
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </div>
</body>

css的实现：

*{
    margin: 0;
    padding: 0;
}
.wrap{
    min-width:600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background: grey;
}

#left,#right{
    width: 200px;
    height: 200px;
    background: green;
}
#middle{
    background: blueviolet;
    width: 100%;
    float:left;
}
#content{
    overflow: hidden;
}
#left{
    float:left;
    margin-left:-100%;
    
}
#middle{
    height: 200px;
}
#right{
    float:left;
    margin-left: -200px;
}
.middle-inner{
    margin: 0 200px;
}

这个和圣杯差不多，总的来说就是在middle中还设置了一个容器，去装在middle的内容。 大体上先这样介绍，xdm！！！！休息了，css要真的学起来是真的好难啊！！！

avatar
文章
阅读
粉丝