立诚勿怠,格物致知
It's all about connecting the dots

CSS实现三栏布局

一、三栏布局要求

分为左、中、右三部分,高度均为屏幕高度,左边部分宽度为200px,另外两部分等分剩下的页面宽度。

二、实现方案

注:下面这种是比较传统的实现方式,没用到后面CSS3出来的新特性。

<html>
<head></head>
<body>
  <div class="container">
  <aside class="left">Left</aside>
  <div class="wrapper">
    <article class="middle">Middle</article>
    <article class="right">Right</article>
  </div>
  </div>
</body>
</html>

 

.clearfix() {
  &:after {
    content: '';
    clear: both;
    display: block;
    height: 0;
    opacity: 0;
    visibility: hidden;
  }
}
html, body, div, aside, article {
  margin: 0;
  padding: 0;
}
html, body, container, .left, .wrapper, .middle, .right {
  height: 100%;
}
.container {
  padding-left: 200px;
  .clearfix();

  .left {
    float: left;
    width: 200px;
    margin-left: -200px;
    background-color: skyblue;
  }

  .wrapper {
    float: left;
    width: 100%;

    .middle, .right {
      float: left;
      width: 50%;
    }
    .middle {
      background-color: gray;
    }
    .right {
      background-color: yellow;
    }
  }
}

 

赞(0) 打赏
版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《CSS实现三栏布局》
文章链接:https://www.orzzone.com/css-three-column.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册