<!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. IOS--UIPageControl的使用方法详细

    IOS--UIPageControl的使用方法详细   // UIPageControl的常用方法 UIPageControl *onePageControl = [[UIPageControl al ...

  2. LRU 算法简单实现

    在学习很多服务器软件中,当内存不够,而需要淘汰内存的时候,一般会使用LRU算法,便产生了浓厚的兴趣.在学习操作系统的过程中发现LRU在系统中用寄存器和栈来实现.所以我就尝试着学习用栈来解决LRU的问题 ...

  3. CentOS 6.x 下Postfix和dovecot邮件服务安装和基本配置

    1 卸载sendmail [root@mail~]# pstree | grep sendmail [root@mail~]# service sendmail stop [root@mail~]# ...

  4. Color the ball

    hdu1556:http://acm.hdu.edu.cn/showproblem.php?pid=1556 题意:中文题. 题解:这一题当然可以直接用线段树来打,但是最近在学树状数组,所以用树状数组 ...

  5. [项目构建 十三]babasport Nginx负载均衡的详细配置及使用案例详解.

    在这里再次说明下, 这个项目是从网上 找到的一套学习资料, 自己在 空闲时间学习了这些东西. 这里面的code当然会有很多不完善的地方, 但是确实也能学到很多新东西.感谢看过这一些列博文和评论的小伙伴 ...

  6. 《Ruby语言入门教程v1.0》学习笔记-03

    10.09 第七章 7.1 模块 Ruby标准包里的 Math 模块提供了许多方法,比如:求平方根 sqrt ,使用的时候要这么写:模块名.方法名(参数).如:Math.sqrt( a*5+b ) M ...

  7. 什么是Web Service？

    Web service到底是什么:在什么情况下你应该使用Web service. 分布式应用程序和浏览器 研究一下当前的应用程序开发,你会发现一个绝对的倾向:人们开始偏爱基于浏览器的瘦客户应用程序.这 ...

  8. [Data Structure] 二叉搜索树(Binary Search Tree) - 笔记

    1. 二叉搜索树,可以用作字典,或者优先队列. 2. 根节点 root 是树结构里面唯一一个其父节点为空的节点. 3. 二叉树搜索树的属性: 假设 x 是二叉搜索树的一个节点.如果 y 是 x 左子树 ...

  9. C++ —— 类的基础

    C++类的设计与基础       2015.9.11 1.变量和常量的命名:确定程序中的变量.常量.函数的名字都是具有描述性的名字,具有直接的意义.如numberOfStudent 比 numOfSt ...

  10. CAD INSTALL PROBLEMS

    Windows8操作系统,没有重装系统前安装Autodesk软件是完全没有问题的 把电脑还原系统后再安装Autodesk软件提示缺少LiteHtml.dll文件了 兼容性改为XP3,然后点管理员身份运 ...