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;
    }
  }
}

 

Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据