CSS实现三栏布局的四种方法示例

时间:2017-04-08

CSS代码如下:

//CSS reset
body,html {
    height:100%;
    padding: 0;
    margin: 0
}
//左栏左浮动
.left {
    background: red;
    width: 100px;
    float: left;
    height: 100%;
}
//中间自适应
.main {
    background: blue;
    height: 100%;
    margin:0px 200px 0px 100px;
}
//右栏右浮动
.right {
    background: red;
    width: 200px;
    float: right;
    height: 100%;
}

这种方式代码足够简洁与高效,也容易理解

总结

以上就是这篇文章的全部内容了,四种方法其实只有圣杯布局和双飞翼布局较难理解,但实际上理解了圣杯布局,双飞翼布局自然就理解了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流。

  • 共2页:
  • 上一页
  • 2/2下一篇
    上一篇:利用css实现浮雕效果示例代码 下一篇:手把手教你用CSS实现带箭头的流程进度条

    相关文章

    最新文章