<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <header>This is header.</header>

  <section>

    <div class="main">

      <h3>This is main section.</h3>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

    </div>

    <aside class="left">

      <h3>left menu.</h3>

      <ul>

        <li>

          <a href="">link1</a>

        </li>

        <li>

          <a href="">link2</a>

        </li>

        <li>

          <a href="">link3</a>

        </li>

        <li>

          <a href="">link4</a>

        </li>

      </ul>

    </aside>

    <aside class="right">

      <h3>Right menu.</h3>

      <ul>

        <li>

          <a href="">link1</a>

        </li>

        <li>

          <a href="">link2</a>

        </li>

        <li>

          <a href="">link3</a>

        </li>

        <li>

          <a href="">link4</a>

        </li>

      </ul>

    </aside>

  </section>

</body>

</html>
 *{

   box-sizing: border-box;

 }

 body{

   background: #e1ddd9;

 }

 header, footer, .main, aside{

   background: #fff;

   padding: 10px;

   margin-bottom: 10px;

 }

 section{

   overflow: hidden;

   padding-left: 210px;

   padding-right: 210px;

 }

 section .main, section aside{

   float: left;

 }

 section .main{

   widows: 100%;

 }

 section aside.left{

   width: 200px;

   margin-left: -100%;

   position: relative;

   left: -210px;

 }

 section aside.right{

   width: 200px;

   margin-left: -200px;

   position: relative;

   left: 210px;

 }

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <header>

    <h1>This is header.</h1>

  </header>

  <div class="main">

    <div class="main-inner">

      <h3>This is main section.</h3>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

      <p>This is p.</p>

    </div>

  </div>

  <aside class="left">

    <h3>left menu.</h3>

    <ul>

      <li>

        <a href="">link1</a>

      </li>

      <li>

        <a href="">link2</a>

      </li>

      <li>

        <a href="">link3</a>

      </li>

      <li>

        <a href="">link4</a>

      </li>

    </ul>

  </aside>

  <aside class="right">

    <h3>Right menu.</h3>

    <ul>

      <li>

        <a href="">link1</a>

      </li>

      <li>

        <a href="">link2</a>

      </li>

      <li>

        <a href="">link3</a>

      </li>

      <li>

        <a href="">link4</a>

      </li>

    </ul>

  </aside>

  <footer>

    <h1>This is footer.</h1>

  </footer>

</body>

</html>
*{

  box-sizing: border-box;

}

body{

  background: #e1ddd9;

}

header, footer, .main, aside{

  background: #fff;

  padding: 10px;

  margin-bottom: 10px;

}

.main, aside{

  float: left;

}

.main{

  float: left;

  width: 100%;

  overflow: hidden;

}

.main-inner{

  margin: 0 210px;

}

aside.left{

  width: 200px;

  margin-left: -100%;

}

aside.right{

  width: 200px;

  margin-left: -200px;

}

footer{

  clear: both;

}

css布局之三栏布局的更多相关文章

  1. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  2. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  3. CSS实现两栏布局

    写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...

  4. CSS布局——三栏布局

    说到三栏布局,很多都会提到圣杯布局和双飞翼布局这两个经典的三栏布局方式.于是,我在网上搜了一些相关资料,阅读并跟着代码敲了一遍,发现在处理三栏布局上,他们采用的都是两边栏固定,中间栏自适应的策略.在处 ...

  5. CSS实现三栏布局(5种)

    常见的布局方式: float布局.Position定位.table布局.弹性(flex)布局.网格(grid)布局 那么我们就是用以上5种方式完成三栏布局,不过前提是左右宽度(假如左右宽度为300px ...

  6. 前端经典面试题之CSS实现三栏布局，左右宽度固定，中间宽度自适应

    前端常问的面试题,题目:假设高度一定,请写出三栏布局,左右宽度300px,中间自适应. 看到这里我希望你能停下来思考几分钟, 1分钟~2分钟~3分钟~4分钟~5分钟! 好了,那么你想出了几种答案呢? ...

  7. css 实现三栏布局的四种方式

    三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位 <div class="left">左边</div> <div class=" ...

  8. css篇-页面布局-三栏布局

    页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...

  9. 【CSS】三栏布局的经典实现

    要求:自适应宽度,左右两栏固定宽度,中间栏优先加载: <!DOCTYPE html> <html> <head> <title>layout</t ...

随机推荐

  1. mysql一个表中多个字段对应另一个表的id如何查询？

    比如有如下2个表 a 和baaID b1ID b2ID b3ID1 1 3 52 2 4 6bbID bCon1 苹果2 香蕉3 国内4 国外5 出口6 进口其中a表中的b1ID,b2ID,b3ID都 ...

  2. 利用花生壳在自己电脑上建立外网可访问的svn

    下载花生壳并注册账号 2.花生壳会送你一个免费的二级域名 3.登陆到路由器界面192.168.0.1或者192.168.0.0进入动态dns选项输入你的花生壳账号密码 4.在路由器设置界面设置转发规则 ...

  3. javascript language

    function class(function, this, prototype) closure与function expression没有任何关系. closure必然与function联系在一起 ...

  4. Silverlight分享一套企业开发主题

    Silverlight分享一套企业开发主题 Silverlight默认主题时间长了,也视觉疲劳了,于是上网上找了下Silverlight主题.发现SL的主题并不多,下面这套JetPack主题还是SL4 ...

  5. 安装SQL SERVER2005时，需要win7下安装IIS，记录下

    安装SQL server2005 时,需要先安装IIS,这里描述win7系统下配置IIS的方法. 虽然很多文章都有写过,这里只是重复一下 关键是IIS组件全都勾选上,如果没有全部勾选上,IIS组件没有 ...

  6. Word Break II——LeetCode

    Given a string s and a dictionary of words dict, add spaces in s to construct a sentence where each ...

  7. yum nfs

    linux下3大文件共享方法 1.NFS NFS服务器配置 编辑/etc/exports,在文件中列出,要共享的目录.书写规则是:共享目录主机(参数).并且每条规则占据一行.例如: /mnt/mp3 ...

  8. F - Truck History - poj 1789

    有一个汽车公司有很多年的汽车制造历史,所以他们会有很多的车型,现在有一些历史学者来研究他们的历史,发现他们的汽车编号很有意思都是有7个小写字母组成的,而且这些小写字母具有一些特别的意义,比如说一个汽车 ...

  9. Class Prefix（Xcode6以后设置类前缀）

    点开Xcode右侧Utilities,Project Document->Class Prefix  图片:prefix.png 

  10. 在SQL中使用自定义函数

      由于数据库的一个表字段中多包含html标签,现在需要修改数据库的字段把html标签都替换掉.当然我可以通过写一个程序去修改,那毕竟有点麻烦.直接在查询分析器中执行,但是MS SQL Server并 ...