首页 > css教程 > 正文

CSS的经典三栏布局如何实现

原创 2018-01-30 10:00:11 0 17
赞助会员专享特权
这次给大家带来CSS的经典三栏布局如何实现,实现CSS的经典三栏布局的注意事项有哪些,下面就是实战案例,一起来看一下。

本文介绍了CSS经典三栏布局方案,分享给大家,也给自己做个笔记,具体如下:

三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见

1. float布局

最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏:

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
</style>
   
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

接下来再来看中间栏如何处理。我们知道对于float元素,其会脱离文档流,其他盒子也会无视这个元素。(但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。)所以此时只需在container容器内添加一个正常的div,其会无视left和right,撑满整个container,只需再加上margin为left right流出空间即可:

<style>
   .left {
     float: left;
     width: 100px;
     height: 200px;
     background-color: red;
   }
  
   .right {
     float: right;
     width: 100px;
     height: 200px;
     background-color: yellow;
   }
  
   .main {
     background-color: green;
     height: 200px;
     margin-left: 120px;
     margin-right: 120px;
   }
  
   .container {
     border: 1px solid black;
   }
  
   <div class="container">
   <div class="left"></div>
   <div class="right"></div>
   <div class="main"></div>
   </div>

优势:简单

劣势:中间部分最后加载,内容较多时影响体验

2. BFC 规则

BFC(块格式化上下文)规则规定:BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可:

<style>
  .left {
    float: left;
    width: 100px;
    height: 200px;
    background-color: red;
  }
 
  .right {
    float: right;
    width: 100px;
    height: 200px;
    background-color: yellow;
  }
 
  .main {
    background-color: green;
    height: 200px;
    overflow: hidden;
  }
 
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>

3. 圣杯布局

圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过负值margin进行调整。

第一步,先来看下基本布局

<style>
    .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
    }
 
    .right {
        float: left;
        width: 100px;
        height: 200px;
        background-color: yellow;
    }
 
    .main {
        float: left;
        width: 100%;
        height: 200px;
        background-color: blue;
    }
</style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

此时看到的效果是:左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中:

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    background-color: yellow;
}

第二步,将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-100px,则右栏也会移动到和左、中栏一行中:

不过此时还没有大功告成,我们试着在main中加入一些文字:

<body>
    <div class="container">
        <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

可以看到文字被压住了,接下来就要解决这个问题。

第三步,给container一个padding,该padding应该正好等于左、右栏的宽度:

.container {
    padding-left: 100px;
    padding-right: 100px;
}

此时看到的结果是左、中、右三栏都整体收缩了,但文字依然被压住了。

第四步,给左、右两栏加上相对布局,然后再通过设置left和right值向外移动:

.left {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100%;
    position: relative;
    left: -100px;
    background-color: red;
}
 
.right {
    float: left;
    width: 100px;
    height: 200px;
    margin-left: -100px;
    position: relative;
    right: -100px;
    background-color: yellow;
}

到此为止,大功告成:

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

html5怎样做出图片转圈的动画效果

在h5里手机端页面缩放应该如何实现

怎样用H5 Canvas实现3D动态Chart图表

H5的FileReader分布读取文件应该如何使用以及其方法简介

以上就是CSS的经典三栏布局如何实现的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:css 样式表 实现
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • CSS3+Js实现响应式导航条_CSS/HTML
  • 从零学CSS系列之文本属性_基础教程
  • 手机屏幕尺寸测试——手机的实际显示页面的宽度_经验交流
  • CSS3中Transition属性详解以及示例分享_CSS/HTML
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节