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. Android开发之ExpandableListView扩展（BaseExpandableListAdapter的使用）（完整版）

    Android开发之ExpandableListView扩展(BaseExpandableListAdapter的使用)(完整版)

  2. css 优先级

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

  3. haproxy path_end不能忽略

    C:\>ping www.zjtest7.com 正在 Ping www.zjtest7.com [192.168.32.82] 具有 32 字节的数据: 来自 192.168.32.82 的回 ...

  4. C errors recods

    error: unterminated #ifndef 1,权限问题 2,少了#endif

  5. API经济产业

    技术大咖为我们铺好了前进道路,我们为什么还要敬而远之舍近索远呢?充分利用开源,利用API进行App有效整合. 为应用添加日志功能,Loggly; 为应用添加用户管理和身份认证模块,Stormpath; ...

  6. vim改变多窗口的大小

    摘自:http://blog.163.com/lgh_2002/blog/static/44017526201031671927647/ vim改变多窗口的大小 VIM改变窗口大小 *window-r ...

  7. DSP TMS320C6000基础学习（1）——介绍

    主要内容 1. Why process signals digitally? (1)模拟电路由模拟组件构成:电阻.电容及电感等,这些组件随着电压.温度或机械结构的改变会动态影响到模拟电路的效果: (2 ...

  8. JAVA学习第二十九课（经常使用对象API）- String类

    多线程告一段落,開始经常使用对象API的涉及,背也要背下来!.! 日后开发,遇见最多的对象是文字,也就是字符串 String类 字符串是一个特殊对象 字符串一旦初始化就不能够被改变 一.特点 publ ...

  9. iOS音频播放(二)：AudioSession

    (本文转自码农人生) 前言 在实施前一篇中所述的7个步骤步之前还必须面对一个麻烦的问题,AudioSession.   AudioSession简介 AudioSession这个玩意的主要功能包括以下 ...

  10. Android二维码开源项目zxing编译

    ZXing是一个开放源代码的,用Java实现的多种格式的1D/2D条码图像处理库,它包括了联系到其它语言的port.Zxing能够实现使用手机的内置的摄像头完毕条形码的扫描及解码.该项目可实现的条形码 ...