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. I/O事件

    I/O事件 最近在研究tornado和gevent,里面涉及了非阻塞I/O.在了解非阻塞I/O之前,需要先了解I/O事件 我们知道,内核有缓冲区.假设有两个进程A,B,进程B想读进程A写入的东西(即进 ...

  2. YUI的模块化开发

    随着互联网应用越来越重,js代码越来越庞大,如何有效的去组织自己的代码,变得非常重要.我们应该学会去控制自己的代码,而不是到最后一堆bug完全不知道从哪冒出来.前端的模块化开发可以帮助我们有效的去管理 ...

  3. 在WPF中自定义你的绘制（三）

    原文:在WPF中自定义你的绘制(三) 在WPF中自定义你的绘制(三)                                                                  ...

  4. css 优先级

    css优先级的四大原则: 原则一: 继承不如指定 如果某样式是继承来的永远不如具体指定的优先级高.例子1:CODE:<style type="text/css"> &l ...

  5. Linux查看物理CPU个数、核数、逻辑CPU个数 (转)

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  6. [Leetcode][Python]53: Maximum Subarray

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 53: Maximum Subarrayhttps://leetcode.co ...

  7. poj 1742 coins_多重背包

    题意:给你N个种硬币,价值和数量,知道手表不大于m,问能组成(1~m)的价格有多少种情况 套套上次那题的模板直接就行了,http://blog.csdn.net/neng18/article/deta ...

  8. Ruiy classicsQuotations

    1,IT界,许多人会称自己为菜鸟,而每只菜鸟都会有鹰的梦想; 2,把做十件事精力用来做一件事情,你事业就经典了;

  9. cropbox插件实现的头像裁剪效果

    html代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...

  10. 微信朋友圈分享js代码最新2015年无错版

    最近微信对分享做了进一步规范,导致很多分享都不起作用了,今天跟大家分享,2015年最新修无错的! 以下是主要微信分享页面代码:(其中红色部分主要懒友自己填写自己哈.) <?php require ...