三列布局的步骤是,先定义左右两侧,然后定义中间,并设置'中间'部分的'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. OneAlert 入门（一）——事件流

    OneAlert 入门(一)--事件流 OneAlert 是国内首个 SaaS 模式的云告警平台,集成国内外主流监控/支撑系统,实现一个平台上集中处理所有 IT 事件,提升 IT 可靠性.它能以史上第 ...

  2. Android开源项目发现--- 效率开发工具篇（持续更新）

    1.Json2Java 根据JSon数据自动生成对应的Java实体类,还支持Parcel.Gson Annotations对应代码自动生成.期待后续的提取父类以及多url构建整个工程的功能 项目地址: ...

  3. PowerDesigner将PDM导出生成WORD文档--温习老知识

    转:http://www.cnblogs.com/wudiwushen/archive/2010/05/13/1734812.html 今天的温习老知识,是如何将一个PD设计的PDM来导出WORD文档 ...

  4. unity3d Realistic eye shading 真实的眼睛渲染

    先放上效果 人皮都做了,当然要来研究下眼睛,眼睛要比人体皮肤简单一些(实时模拟人皮在此) 一看是不是很复杂 这是眼睛的解构,但是,我们只需要模拟出虹膜巩膜和角膜就能达到相当真实的眼睛 巩膜就是白眼球 ...

  5. OFFSET & FETCH

    OFFSET & FECTH 关键字与ORDER BY结合使用,实现对查询结果的分页 一.单独使用OFFSET: 示例:查询所有职员的信息,按雇佣日期排序并跳过前285条记录(共290条) U ...

  6. [LeetCode] Largest Rectangle in Histogram 解题思路

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  7. CentOS 6.5 下安装 Redis 2.8.7（转）

    转自:http://www.cnblogs.com/haoxinyue/p/3620648.html CentOS 6.5 下安装 Redis 2.8.7 wget http://download.r ...

  8. Linux 操作系统位数(32or64)识别

    Linux 操作系统位数识别: LINUX 32位操作系统:Linux x86   i586  i386  i686 i... LINUX 64位操作系统:Linux x64x86_64  X64 . ...

  9. winform 曲线(贝塞尔) 分类： WinForm 2014-12-29 16:52 109人阅读 评论(0) 收藏

    <span style="font-size:14px;">//覆盖OnPaint事件</span> <span style="font-s ...

  10. SecondarySort 原理

    定义IntPair 以及 IntPair(first,second)的compareto,先比較first的大小,再比較second的大小 定义FirstPartitioner是为了让partitio ...