要达到的效果是三栏布局,两端宽度200px;固定不变,中间宽度自适应.

 

圣杯布局.

 

利用浮动和相对定位实现.

 

html代码

 

<div class="container">

 

    <div class="middle">

 

        圣杯布局中

 

    </div>

 

    <div class="left">

 

        圣杯布局左

 

    </div>

 

    <div class="right">

 

        圣杯布局右

 

    </div>

 

</div>

 

css代码

 

.left,

 

.middle,

 

.right{ 

 

    position: relative;

 

    float: left;

 

}

 

.container{

 

    padding:0 200px 0 200px;

 

    overflow: hidden;

 

}

 

.container div{

 

    height: 100px;

 

}

 

.left,.right{

 

    width: 200px;

 

    background: red;

 

}

 

.left{

 

    margin-left: -100%;

 

    left: -200px;

 

}

 

.right{

 

    margin-left: -200px;

 

    right: -200px;

 

}

 

.middle{ 

 

    width: 100%;

 

    background: blue;

 

}

 

双飞翼布局

 

同圣杯布局差不多,只不过在实现中间部分自适应的方式有所区别,这种方式多嵌套了一个div.

 

html代码

 

<div class="center">

 

    <div class="center-inner">

 

        双飞翼布局 中

 

    </div>

 

</div>

 

<div class="left">

 

    双飞翼布局 左

 

</div>

 

<div class="right">

 

    双飞翼布局 右

 

</div>

 

css代码

 

.left,

 

.center,

 

.right {

 

    float: left;

 

    height: 100px;

 

}

 

.left {

 

    margin-left: -100%;

 

    width: 200px;

 

    background: red;

 

}

 

.right {

 

    margin-left: -200px;

 

    width: 200px;

 

    background: red;

 

}

 

.center {

 

    width: 100%;

 

    background: green;

 

}

 

.center-inner {

 

    margin-left: 200px;

 

    margin-right: 200px;

 

}

 

上述布局方式都是采用的传统的css标准实现,下面介绍三种其他的实现的方式(flex,grid,calc()).

 

flex

 

利用flex的元素属性实现.元素属性的flex是一个复合属性.flex:flex-grow | flex-shrink | flex-basis;分别为:空间充足放大比,空间不足缩小比以及计算剩余空间之前的宽度值.

 

可参考阮一峰的文章:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

 

html代码

 

<div class="flex">

 

<div class="l"></div>

 

<div class="c"></div>

 

<div class="r"></div>

 

</div>

 

css代码

 

.flex{

 

    display: flex;

 

}

 

.flex div{

 

    height: 50px;

 

}

 

.l,.r{

 

    background-color: yellow;

 

    flex:0 0 200px;

 

}

 

.c{

 

    flex:1;

 

    background-color: red;

 

}

 

grid

 

grid是微软提出的网页布局解决方案,最新的Safari，Chrome，Firefox都已经进行了支持.个人感觉grid布局比flex布局更强大一些,宽度高度两个方向上都可以得到控制.grid也更容易理解.

 

html代码

 

<div class="grid">

 

<div class="l"></div>

 

<div class="c"></div>

 

<div class="r"></div>

 

</div>

 

css代码

 

.grid{

 

    display: grid;

 

    grid-template-columns: 200px auto 200px;

 

    grid-template-rows:100px

 

}

 

.l,.r{

 

    background-color: red;

 

}

 

.c{

 

    background-color: pink;

 

}

 

css3的calc()函数

 

css3提供的calc()函数能够实现给宽高等设置动态的值.支持 + - * / 四则运算.注意运算符两边要个留一个空格.否则设置无效.

 

同样需要设置浮动将三个元素并排显示.如果不想设置浮动的话,可将单个内部div设置为inline-block;同时,为了取消换行带来的html显示间隙.需将最外层盒子的字体设置为0,即 .calc{font-size:0}.

 

html代码

 

<div class="calc">

 

<div class="l"></div>

 

<div class="c"></div>

 

<div class="r"></div>

 

</div>

 

css代码

 

.calc div{

 

    float: left;

 

    height: 50px;

 

}

 

.l,.r{

 

    width:200px;

 

    background-color: red;

 

}

 

.c{

 

    width:calc(100% - 400px);

 

    background-color: green;

 

}

 

小结:

 

使用flex,grid以及css3的calc()的实现代码明显较传统的方式精简许多.

 

使用手机测试中,本人的Android5.0.2flex和css3的方式都能正常显示.grid的布局则显示错误.

 

grid布局的Android和ios的支持程度,希望大家测试留言.