css圣杯布局详解(什么叫圣杯布局)

Joker • • 前端笔记 • 366 阅读

在css里什么叫圣杯布局？是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性，本文主要内容是通过代码实例对css圣杯布局进行详解。

看看圣杯布局，这是一种三列布局，两边定宽，中间自适应的布局，案例代码如下：





布局案例1

* {
    box-sizing: border-box;
}
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
}
.container{
    width:100%;
}
.container:after{
    display: table;
    content:".";
    clear:both;
}
.container .cl{
    float:left;
    border: 1px solid red;
    height: 200px;
}
.main{
    width:100%;
    padding 0 290px 0 320px;
    background-color: blue;
}
.sub{
    width: 320px;
    margin-left:-100%;
    background-color: white;
}
.extra{
    width: 290px;
  margin-left:-290px;
  background-color: yellow;
}