<!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. Glide制作圆形图片

    上效果图: 第一步: AndroidStudio添加依赖库: compile 'com.github.bumptech.glide:glide:3.5.2' 第二步: <ImageView an ...

  2. sphinx coreseek SetSortMode(SPH_SORT_ATTR_ASC, '') 对float 排序设置bug

    when I use SetSortMode(SPH_SORT_ATTR_ASC, 'floatVar'), it works unexpectedly. for example, I have a ...

  3. Intention Locks 意向锁

    Intention Locks 意向锁 InnoDB 支持多颗粒度锁定允许row-level locks和锁整个表共存. 为了使锁在多个颗粒级别实现, 额外类型的锁被称为意向锁是被使用. . Inte ...

  4. COJ 0200 Fibonacci

    传送门:http://oj.cnuschool.org.cn/oj/home/problem.htm?problemID=200 试题描述: 地球人都知道Fibonicca数列: 1 1 2 3 5 ...

  5. [Poetize I]守卫者的挑战

    描述 Description 打开了黑魔法师Vani的大门,队员们在迷宫 般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过.“我,Nizem,是黑魔法圣殿的守卫者.如果 ...

  6. js编写验证码

    这是一个简单的js编写的验证码,自己已经亲自验证,没有问题了 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  7. 话说python

    前几年就职于一个大的软件公司时,开发过程中,有一个流程化的步骤要做,就是要由一个excel文档导出生成一堆sql语句.当时使用一个高手写的代码,只不过有限几行代码(应该不到100行),就完美实现此功能 ...

  8. java NIO的多路复用及reactor模式【转载】

    关于java的NIO,以下博客总结的比较详细,适合初学者学习(http://ifeve.com/java-nio-all/) 下面的文字转载自:http://www.blogjava.net/hell ...

  9. F - True Liars - poj1417（背包+并查集）

    题意:有这么一群人,一群好人,和一群坏人,好人永远会说实话,坏人永远说假话,现在给你一组对话和好人与坏人的数目P1, P2. 数据里面的no是A说B是坏人, yes代表A说B是好人,就是这样,问题能不 ...

  10. 微信/易信公共平台开发（二）：自定义菜单的PHP实现(提供源码)

    微信把公众号分成订阅号和服务号两种,服务号可以自定义菜单, 菜单大大方便了用户操作. 比如:公众服务号 "中国南方航空" 的自定义菜单如下图: 点菜单就可以直接进入操作了,方便! ...