三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'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. 【POJ2478】Farey Seque

    题意: 就是求2~n的所有欧拉函数值的和,这里就用到了快速求欧拉函数的方法.(不能暴力求了,不然必定TLE啊) 说说欧拉筛法,感觉十分机智啊~~ 对于上述代码的几个问题: 1.问:为什么i%prime ...

  2. C++ Virtual详解（注意函数被隐藏的问题）

    Virtual是C++ OO机制中很重要的一个关键字.只要是学过C++的人都知道在类Base中加了Virtual关键字的函数就是虚拟函数(例如函数print),于是在Base的派生类Derived中就 ...

  3. 读书笔记-----Java并发编程实战（一）线程安全性

    线程安全类:在线程安全类中封装了必要的同步机制,客户端无须进一步采取同步措施 示例:一个无状态的Servlet @ThreadSafe public class StatelessFactorizer ...

  4. Android开源项目发现--- 工具类数据库ORM篇（持续更新）

    orm的db工具类,简化建表.查询.更新.插入.事务.索引的操作 1. greenDAO Android Sqlite orm的db工具类 项目地址:https://github.com/greenr ...

  5. LINUX系统中动态链接库的创建与使用{补充}

    大家都知道,在WINDOWS系统中有很多的动态链接库(以.DLL为后缀的文件,DLL即Dynamic Link Library).这种动态链接库,和静态函数库不同,它里面的函数并不是执行程序本身的一部 ...

  6. Linux学习笔记13——使用curses函数库

    一 安装curses库 如果你的Linux系统中curses库,直接敲入命令sudo apt-get install libncurses5-dev,然后就会自动安装curses库,安装好之后敲入命令 ...

  7. Bzoj 2588: Spoj 10628. Count on a tree 主席树,离散化,可持久,倍增LCA

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2588 2588: Spoj 10628. Count on a tree Time Limit ...

  8. hdoj 1285 确定比赛名次【拓扑排序】

    确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  9. wind安装selenium

    1.按win+r进入运行模式,然后输入cmd进入命令行 2.输入pip按回车 查看命令帮助 3.然后输入pip install selenium 按回车,然后等待 下载,下载好了会自动安装完成 3.然 ...

  10. 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（21）-权限管理系统-跑通整个系统

    原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(21)-权限管理系统-跑通整个系统 这一节我们来跑通整个系统,验证的流程,通过AOP切入方式,在访问方法之 ...