三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'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. 同样版本的jstl,都是jstl1.2版本，有个有问题，另一个没有问题

    问题是这样的,最近部署一个项目,发现每次访问首页的时候老是报如下的错误: org.springframework.web.util.NestedServletException: Handler pr ...

  2. QMetaObject感觉跟Delphi的类之类有一拼，好好学一下

    提供了一堆原来C++没有的功能,比如反射什么的...但是可能还是没有Delphi的类之类更强,因为类之类可以“创建类”.可惜我学艺不精,对“类之类”也没有完全学会.先留个爪,有空把两个东西都好好学学, ...

  3. [SQL Server]一次执行资料夹内的.sql 指令码

    原文:[SQL Server]一次执行资料夹内的.sql 指令码 初始资料库时,我们Developers们会准备很多.sql指令码来建立资料表.检视甚至初始资料,那麽要怎麽一次执行资料夹内的*.sql ...

  4. jps命令(Java Virtual Machine Process Status Tool)

    1.介绍 用来查看基于HotSpot的JVM里面中,所有具有访问权限的Java进程的具体状态, 包括进程ID,进程启动的路径及启动参数等等,与unix上的ps类似,只不过jps是用来显示java进程, ...

  5. 深入剖析Java中的装箱和拆箱（转）

    自动装箱和拆箱问题是Java中一个老生常谈的问题了,今天我们就来一些看一下装箱和拆箱中的若干问题.本文先讲述装箱和拆箱最基本的东西,再来看一下面试笔试中经常遇到的与装箱.拆箱相关的问题. 以下是本文的 ...

  6. MacOS下的生活——RescueTime，时间规划利器

    前段时间Yxj同学给我推荐了一款可以记录电脑及手机使用时间分类的软件,据说Mac平台下也支持,当时就有了兴趣,但是好像因为什么事给耽搁了,知道今天下午看到Yxj在看这个软件记录的自己的时间表,才觉得这 ...

  7. 折腾iPhone的生活——iOS设备重刷固件

    iOS设备升级系统总共有这么几种方法: 1.OTA升级,也就是我们最常碰到的,在设备上,连上Wifi,在设置里面的软件更新就可以直接通过Wifi安装新的系统(已越狱设备不要这样升级) 2.通过iTun ...

  8. [转]让程序在崩溃时体面的退出之SEH

    原文地址:http://blog.csdn.net/starlee/article/details/6636723 SEH的全称是Structured Exception Handling,是Wind ...

  9. Ural 1046 Geometrical Dreams（解方程+计算几何）

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1046 参考博客:http://hi.baidu.com/cloudygoose/item ...

  10. hdoj 1686 Oulipo【求一个字符串在另一个字符串中出现次数】

    Oulipo Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...