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. wordpress一些常用代码

    显示最新文章 <div id="newpost"> <h2> 最新文章</h2> <?php $previous_posts = get_ ...

  2. NFC扫描

    目录(?)[-] 简介 什么是NFC 标签和读取器 标签 读取器 NFC模式 通信模式 主动模式 被动模式 操作模式 读写 点对点 模拟卡片 NFC用例 用于启动服务 用于分享 用于连接设备 用于买票 ...

  3. stl入门--reverse函数

    #include<iostream> #include<algorithm>          using namespace std; int main() {     ch ...

  4. TCP 协议三次握手过程解析带实例

    TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确认建立一个连接: 位码即tcp标志位,有6种标 ...

  5. 网易云课堂_C语言程序设计进阶_期末考试编程题部分

    1 字符串循环右移(5分) 题目内容: 输入一个字符串和一个非负整数N,要求将字符串循环右移N次. 输入格式: 输入在第1行中给出一个字符串,以'#'表示结束,‘#’不是字符串的一部分,字符串的长度未 ...

  6. 解决：Incorrect line ending: found carriage return (\r) without corresponding newline (\n)

    解决方案: ——clean一下项目,这个方法可以解决 . 此方案经过验证OK

  7. 【拆点费用流】【HDU1853】【 Cyclic Tour】

    题意: 有N个城市,M条单向路,Tom想环游全部城市,每次至少环游2个城市,每个城市只能被环游一次.由于每条单向路都有长度,要求游遍全部城市的最小长度. // 给定一个有向图,必须用若干个环来覆盖整个 ...

  8. 使用float属性布局时父元素高度不能自适应的解决方法

    在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应.比如下面这段代码: <!DOCTYPE html> <ht ...

  9. js正则判断电话/手机/邮箱/

    用途:校验ip地址的格式 输入:strIP:ip地址返回:如果通过验证返回true,否则返回false:*/ function isIP(strIP) { if (isNull(strIP)) ret ...

  10. 用CSS做圆角矩形

    第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...