<!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. ISO 7810 协议小结

    ISO 7816规定了Smart Card的传输协议分为 T=0 异步半双工字符传输协议 T=1 异步半双工块传输协议 T=0命令介绍 命令总是由接口设备启动,他以一个5字节的报头通知卡要做什么,然后 ...

  2. MappedByteBuffer高速缓存文件、RandomAccessFile随机访问

    说到高速缓存存储,处理读写文件,那就不得不说MappedByteBuffer. 看了好多文章以后写一下自己的总结. 在这里先介绍一下相关的类与方法. 先说一下Buffer.ByteBuffer.Map ...

  3. 理解java中的ThreadLocal（转）

    一.对ThreadLocal概述 JDK API 写道: 该类提供了线程局部 (thread-local) 变量.这些变量不同于它们的普通对应物,因为访问某个变量(通过其 get 或 set 方法)的 ...

  4. Asteroids(二分图最大匹配模板题)

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12323   Accepted: 6716 Description Bess ...

  5. 【动态规划】XMU 1583 Sequence

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1583 题目大意: T组数据,对于n(n<=6000)给定序列Xn(Xn<= ...

  6. lr 增强窗格中，如何生成调试信息？

    我是根据电子书来操作的, 如何生成调试信息?在测试运行的某些时候,经常需要向输出设备发送消息,指出当前位置和其他信息.这些输出消息会出现在回放日志和 Controller 的输出窗口中.可以发送标准输 ...

  7. 谈谈托管代码、IL、CLR、ISAPI？

    什么是托管代码?       托管代码是可以使用20多种支持Microsoft .NET Framework的高级语言编写的代码,这些语言包括:C#, J#, Microsoft Visual Bas ...

  8. libevent的简单应用【转载】

    本文转载自: http://blog.csdn.net/liuguanghui1988/article/details/7090531 Libevent的应用主要围绕几大事件:超时事件.信号事件.读/ ...

  9. [Java] TreeMap - 源代码学习笔记

    TreeMap 实现了 SortedMap 和 NavigableMap 接口,所有本文还会记录 SortedMap 和 NavigableMap 的阅读笔记. SortedMap 1. 排序的比较应 ...

  10. openStack 云平台使用一般杂记

    1. To launch an instance,you must at least specify the flavor,image name,network,security group,keyp ...