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. 七牛云Fetch第三方资源并转码（PHP版）

    七牛云的图片加速一直在用,好用没得说,最近项目需要做个微信端录音,然后上传,别人试听的功能,录音和上传用的都是微信的接口,有文档,比较方便,但是上传后,微信只给保存3天,所以就下载到了七牛,也就用到了 ...

  2. Spring中IoC - 两种ApplicationContext加载Bean的配置

    说明:Spring IoC其实就是在Service的实现中定义了一些以来的策略类,这些策略类不是通过 初始化.Setter.工厂方法来确定的.而是通过一个叫做上下文的(ApplicationConte ...

  3. GDAL与OpenCV2.X数据转换（适合多光谱和高光谱等多通道的遥感影像）

    一.前言 GDAL具有强大的图像读写功能,但是对常用图像处理算法的集成较少,OpenCV恰恰具有较强的图像处理能力,因此有效的结合两者对图像(遥感影像)的处理带来了极大的方便.那么如何实现GDAL与o ...

  4. mh

    http://video.sina.com.cn/vlist/news/zt/mlxyhkhbsl/#131455718 http://www.cnblogs.com/xinye/archive/20 ...

  5. ZigBee 技术简介

       Zigbee是IEEE 802.15.4协议的代名词.根据这个协议规定的技术是一种短距离.低功耗的无线通信技术.这一名称来源于蜜蜂的八字舞,由于蜜蜂(bee)是靠飞翔和“嗡嗡”(zig)地抖动翅 ...

  6. inet address example(socket)

    package com.opensource.socket; import java.net.Inet4Address; import java.net.Inet6Address; import ja ...

  7. sa命令从/var/account/pacct原始记账数据文件读取信息并汇总

    sa命令从/var/account/pacct原始记账数据文件读取信息并汇总

  8. 【BZOJ 1088 扫雷Mine】模拟

    http://www.lydsy.com/JudgeOnline/problem.php?id=1088 2*N的扫雷棋盘,第二列的值a[i]记录第 i 个格子和它8连通的格子里面雷的数目. 第一列的 ...

  9. 【Java接口实现动态加载不同的类】

    public interface Person {       public double calcuMonthlySalary(double sal, int type);    }   publi ...

  10. 开源 iOS 项目分类索引大全

    GitHub 上大概600个开源 iOS 项目的分类和介绍,对于你挑选和使用开源项目应该有帮助 系统基础库 Category/Util sstoolkit 一套Category类型的库,附带很多自定义 ...