<!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. Hazelcase 简介

    原博客地址:http://blog.csdn.net/zhu_tianwei/article/details/47984599 Hazelcast是一种内存数据网格in-memory data gri ...

  2. hdu 5124 lines

    http://acm.hdu.edu.cn/showproblem.php?pid=5124 题意:给你n条线段,然后找出一个被最多条线段覆盖的点,输出覆盖这个点的线段的条数. 思路:可以把一条线段分 ...

  3. 更改新建Asp.net WebForm的模板 的方法

    C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\ItemTemplates\CSharp\Web\2052\WebFor ...

  4. java 、Android 提交参数转码问题

    1.解决Android.JAVA.ajax提交中文.URL中文参数传递后的乱码问题的解决办法  2.JAVA 中URL链接中文参数乱码的处理方法  3.JAVA URL中带有中文时的处理 在提交参数的 ...

  5. Android 5.0 Lollipop初上手体验

    在等了好几天还没有等到OTA升级提示,前天笔者给Nexus4线刷入了官方提供的Lollipop的镜像,在试用了这两天之后,现在总结下自己感觉很惊艳的地方和一些地方的吐槽.(点击图片可以查看大图) 1. ...

  6. HDOJ(HDU) 1785 You Are All Excellent(角度运算)

    Problem Description 本次集训队共有30多人参加,毫无疑问,你们都是很优秀的,但是由于参赛名额有限,只能选拔部分队员参加省赛.从学校的角度,总是希望选拔出最优秀的18人组成6支队伍来 ...

  7. Spark on YARN的两种运行模式

    Spark on YARN有两种运行模式,如下 1.yarn-cluster:适合于生产环境.        Spark的Driver运行在ApplicationMaster中,它负责向YARN Re ...

  8. Jquery中常见问题

    最近也是在做项目的时候刚接触到jQuery.下面汇总一下遇到的几个问题 如何动态创建按钮 方式一: $("#a").html("<input type='butto ...

  9. 不用外部JAR包，自己实现JSP文件上传！

    看书上(JSP应用与开发技术)使用JSP文件上传,写了个真无语,压根就有很多问题,上传500KB的文件传过去后只剩350KB,而且编码必须是GBK.GB2312,否则传过去的文件都数据截取不正确. 琢 ...

  10. mysql查询最近一小时的数据

    date_sub()函数: DATE_SUB(date,INTERVAL expr type) 实例: SELECT NOW(),DATE_SUB(NOW(),INTERVAL HOUR) as th ...