html部分

<body>

    <form id="form1" runat="server">

    <div id="wrap">

        <div id="header">header</div>

        <div id="container">

            <div id="left_side">left_side</div>

            <div id="content">content</div>

            <div id="right_side">right-side</div>

        </div>

        <div id="footer">footer</div>

    </div>

    </form>

</body>

css部分

<style type="text/css">

	#wrap{

	    width:700px;

	    margin:0 auto;

	}

	#header{

	    margin:20px;

	    height:80px;

	    border:solid 1px #0000FF;

	}

	#container{

	    position:relative;

	    margin:20px;

	    height:400px;

	}

	#left_side{

	    position:absolute;

	    top:0px;

	    left:0px;

	    border:solid 1px #0000FF;

	    width:170px;

	    height:100%;

	}

	#content{

	    margin:0px 190px 0px 190px;

	    border:solid 1px #0000FF;

	    height:100%;

	}

	#right_side{

	    position:absolute;

	    top:0px;

	    right:0px;

	    border:solid 1px #0000FF;

	    width:170px;

	    height:100%;

	}

	#footer{

	    margin:20px;

	    height:80px;

	    border:solid 1px #0000FF;

	}

</style>

　　说明

1、在#container中设置“position:relative;”，其作用是使得后面的绝对定位的基准为#container而不是以浏览器为其准。

2、左侧列#left_side和右侧#right_side列采用绝对定位，并且固定这两个div的宽度，而中间列#content由于需要根据浏览器自动调整，因此不设置类似属性。

但由于另外两个块的position属性设置为absolute，此时必须将它的margin-left和margin-right属性都设置为190px。

CSS左中右布局，规范案例的更多相关文章

  1. android RelativeLayout实现左中右布局

    RelativeLayout实现左中右布局   <RelativeLayout android:layout_width="match_parent" android:lay ...

  2. css Position 上下左中右布局

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  3. RelativeLayout实现左中右布局

    <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_co ...

  4. 典型的DIV＋CSS布局——左中右版式

    [效果] [HTML] <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Def ...

  5. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

  6. CSS多列布局（实例）

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

  7. css学习_css布局案例

    1.中间栏先加载  !!!(若不是这个条件的话  ,那可以用  calc 或者flex布局来实现  中间栏自适应,左右栏定宽) 2.中间栏自适应   width:100% 3.左右栏固定宽 左中右  ...

  8. css-前端实现左中右三栏布局的常用方法:绝对定位，圣杯，双飞翼，flex，table-cell,网格布局等

    1.前言 作为一个前端开发人员,工作学习中经常会遇到快速构建网页布局的情况,这篇我整理了一下我知道的一些方法.我也是第一次总结,包括圣杯布局,双飞翼布局,table-cell布局都是第一次听说,可能会 ...

  9. CSS定位与布局

    我们在编写网页代码时,首先应该做的就是设计好页面的布局形式,然后再往里面填充内容.网页布局的好与坏,直接决定了网页最终的展示效果.PC端常见的网页布局形式有两列布局.三列布局等.在CSS中,我们通常使 ...

随机推荐

  1. 【ecos学习3】redboot on vmware 网络配置

    需要图形化编译的时候必须 Build->Packages 加入:Common ethernet support 才可以有网络功能 导入vmare需要修改网络连接模式: 1- 设置redbootI ...

  2. php array 排序 感悟

    array  排序总体有这几个函数sort.rsort.asort.arsort.ksort.krsort.usort.uasort.uksort. 一开始我记来记去总是有点混乱,后来认真对比后终于清 ...

  3. MVC4 Controller器同名问题

    一.创建项目 二.修改配置文件(路由器) 详情如下: 总结:解决Controller器同名问题,只需要修改2外,App_Start里的RouteConfig.cs文件和Area下的***AreaReg ...

  4. android关于window

    http://mobile.51cto.com/android-259922_all.htm http://mobile.51cto.com/android-259922.htm http://mob ...

  5. SQL Server 2008 对XML 数据类型操作

    原文 http://www.cnblogs.com/qinjian123/p/3240702.html 一.前言 从 SQL Server 2005 开始,就增加了 xml 字段类型,也就是说可以直接 ...

  6. Android的数据存储方式（转）

    数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 ...

  7. Easyui treegrid复选框设置

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  8. uva12096 The SetStack Computer By sixleaves

    代码     typedef  map<Set,  vector<Set> Setcache;                  stack<               ci ...

  9. 初探swift语言的学习笔记七(swift 的关健词)

    每一种语言都有相应的关键词,每个关键词都有他独特的作用,来看看swfit中的关键词: 关键词: 用来声明的: “ class, deinit, enum, extension, func, impor ...

  10. 依赖注入及AOP简述（七）——FQCN请求模式

    2.2.    FQCN请求模式 为了弥补纯字符串请求模式中的类型安全问题,全类名(FQCN)请求模式就应运而生了.其思想便是,在向容器请求依赖对象的时候,不是通过字符串的标识符.而是通过被请求的依赖 ...