三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'margin'属性.并且'中间'部分不用设置'width'.例如:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <style>

 body { margin:;}

 #content { width:470px; margin: auto;}

 #left { background: #99FF99; height: 300px; width: 120px; float: left; }

 #right { background: #99FF99; height: 300px; width: 120px; float: right; }

 #center { background: #99FFFF; height: 300px; margin: 120px; }

 </style>

 </head>

 <body>

 <div id="content">

   <div id="left">此处显示 id "left" 的内容</div>

   <div id="right">此处显示 id "right" 的内容</div>

   <div id="center">此处显示 id "center" 的内容</div>

 </div>

 </body>

 </html>

的运行结果为:

css-3列布局的更多相关文章

  1. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  2. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  3. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. css两列布局之基于BFC规则实现

    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...

  5. html5 css多列布局

    p{    text-indent: 2em;    line-height: 2em;}h4{    -webkit-column-span:all;    background: green;   ...

  6. css三列布局之双飞翼pk圣杯

    三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...

  7. CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解

    新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...

  8. CSS多列布局（实例）

    前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...

  9. day32—CSS多列布局学习

    转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局   ...

  10. [CSS布局]简单的CSS三列布局

    前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...

随机推荐

  1. 【UVALive - 3211】Now or later （二分+2-SAT）

    题意: 有n架飞机需要着陆.每架飞机有两种选择,早着陆或者晚着陆,二选其一.现在为了保证飞机的着陆安全,要求两架着陆的飞机的时间间隔的最小值达到最大. 分析: 最小值最大问题我们想到二分答案.对于猜测 ...

  2. 谈谈在keil下的代码定位

    关于C语言,我们一般都知道对于RAM定位可以用关键字 _at_,但对于程序代码定位往往感到很迷惑, 其实keil中的程序代码定位功能极为强大 Menu: Options for Target 'Tar ...

  3. [cocos2d demo]新科娘收集水表

    讲述的是新科娘在沙滩上遇到一大波水表的故事... 下载地址 链接:http://pan.baidu.com/share/link?shareid=2141087190&uk=293716439 ...

  4. 【EJS】

    // 用=号输出,就会被escapge转义编码 <%= VARIABLE_NAME %> // 用“-”输出原始内容, 不会被escape <%- VARIABLE_NAME %&g ...

  5. jqGrid简单介绍

    一.要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件. 1.css <link href="/css/ui.jqgrid.css" rel=" ...

  6. removeTask

    SystemUI中,Home键调出小刷子杀最近任务,整个流程从其RecentsPanelView.java开始: public void handleSwipe(View view) { ... // ...

  7. TMS320VC5509A DSP学习路线（持续更新）

    step 1:芯片的数据手册(data sheet) 参考资料:sprs205k_TMS320VC5509A Fixed-Point Digital Signal Processor Data Man ...

  8. 【转】 log4cpp 的使用

    [转自] http://sogo6.iteye.com/blog/1154315     Log4cpp配置文件格式说明   log4cpp有3个主要的组件:categories(类别).append ...

  9. TCP 的那些事儿（上）

    TCP是一个巨复杂的协议,因为他要解决很多问题,而这些问题又带出了很多子问题和阴暗面.所以学习TCP本身是个比较痛苦的过程,但对于学习的过程却能让人有很多收获.关于TCP这个协议的细节,我还是推荐你去 ...

  10. hdoj 2524 矩形A + B【递推】

    矩形A + B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...