【效果】

【HTML】

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" Debug="true" StylesheetTheme="Default" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head runat="server">
  5. <title>左中右版式</title>
  6. </head>
  7. <body>
  8. <form id="form1" runat="server">
  9. <div id="wrap">
  10. <div id="header">header</div>
  11. <div id="container">
  12. <div id="left_side">left_side</div>
  13. <div id="content">content</div>
  14. <div id="right_side">right-side</div>
  15. </div>
  16. <div id="footer">footer</div>
  17. </div>
  18. </form>
  19. </body>
  20. </html>

【CSS】

  1. #wrap{
  2. width:700px;
  3. margin:0 auto;
  4. }
  5. #header{
  6. margin:20px;
  7. height:80px;
  8. border:solid 1px #0000FF;
  9. }
  10. #container{
  11. position:relative;
  12. margin:20px;
  13. height:400px;
  14. }
  15. #left_side{
  16. position:absolute;
  17. top:0px;
  18. left:0px;
  19. border:solid 1px #0000FF;
  20. width:170px;
  21. height:100%;
  22. }
  23. #content{
  24. margin:0px 190px 0px 190px;
  25. border:solid 1px #0000FF;
  26. height:100%;
  27. }
  28. #right_side{
  29. position:absolute;
  30. top:0px;
  31. right:0px;
  32. border:solid 1px #0000FF;
  33. width:170px;
  34. height:100%;
  35. }
  36. #footer{
  37. margin:20px;
  38. height:80px;
  39. border:solid 1px #0000FF;
  40. }

【说明】

典型的DIV＋CSS布局——固定宽度且居中的版式中，运用的是浮动属性；这个实例，则运用了绝对定位属性。

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

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

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

3、左中右布局，也可以运用浮动属性，具体可参考典型的DIV＋CSS布局——固定宽度且居中的版式。

典型的DIV＋CSS布局——左中右版式的更多相关文章

  1. 深度理解div+css布局嵌套盒子

    1. 网页布局概述 网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用<div>标记进行分块,然后对每个快进行CS ...

  2. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

  3. (转)div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  4. (转)Div+CSS布局入门

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  5. <转载>div+css布局教程之div+css常见布局结构定义

    在使用div+css布局时,首先应该根据网页内容进行结构设计,仔细分析和规划你的页面结构,你可能得到类似这样的几块: 页面层容器.页面头部.标志和站点名称.站点导航(主菜单).主页面内容.子菜单.搜索 ...

  6. DIV+CSS布局重新学习之float/margin/padding

    之前对div的css布局一直有点半知半解,只其然却不知其所以然,到网上下载了“十天学会DIV+CSS(WEB标准)”的chm电子版,然后跟着练习了一下,特在此记录,备忘. <!DOCTYPE h ...

  7. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  8. div+css 布局经验 - 最简单的 = 最不变形的（原创技巧）

    站酷几年了 一直饱受其恩泽 尤为感激 一直想奉献些什么 但是苦于水平 苦于奔波 今天静下心来 为大家奉献下 自己的div+css 经验 ,以下观点只代表 深海个人立场 希望为初学者提供一条" ...

  9. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

随机推荐

  1. C#代码篇：代码产生一个csv文件调用有两个核心的坑

    忙活了半天终于可以开工了,a物品到底要不要放进去取决于两个因素,第一是a有4kg重,只有背包大于等于4kg的时候才能装进去(也就是说当i=1,k<4时f[i,k]=0):第二是当背包的重量大于等 ...

  2. x264中的帧类型、条带类型、数据分区(data partition)

    1 条带类型(slice type) x264的条带有三种基本类型分别为:I(主要用于帧内图像编码).P(用于帧间前向参考预测图像编码).B(用于帧间双向参考预测图像编码).SI与SP(切换码流时用) ...

  3. lr_save_var() 截取任意字符串长度，以参数形式输出(参数转变量)

    Action() { char * desc=(char *)malloc(10);  //定义指针变量,以变量形式存放截取到的参数值 // char * aa = "jadkshfkasd ...

  4. windows和Ubuntu双系统的安装和基本操作

    因为最近刚开始学习ubuntu系统,首先要安装系统,搜集了网上的资料觉得这篇博客特别有用  http://www.cnblogs.com/Duane/p/5424218.html,我也是按照里面的步骤 ...

  5. python-cmp()的使用

    注意:python3中已经删除了cmp()该函数. cmp(x,y) 比较x与y,当x>y时,返回1: 当x==y时,返回0: 当x<y时,返回-1: >>>cmp(1, ...

  6. noip2013Day2T3-华容道【一个蒟蒻的详细题解】

    描述 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间. 小 B 玩的华容道与经典的 ...

  7. 为什么PHP（CLI）同一个错误信息会打印两次？

    第一个信息是display_errors输出的,在fpm环境下输出到浏览器那里,而在CLI环境下会打印到屏幕上. display_errors = On 第二个信息是log_errors输出的. lo ...

  8. KindeEditor图片上传插件用法

    因业务需要找了款插件 KindeEditor编辑器确认挺好用,但无奈技术有限,上传配置不知,故问度娘! 图片上传对于部分新手来说有时候是一件非常头疼的事,今天来分享一下项目中使用到的这个插件Kinde ...

  9. POJ 1094 Sorting It All Out（经典拓扑+邻接矩阵）

    (￣▽￣)" //判环:当入度为0的顶点==0时,则有环(inconsistency) //判序:当入度为0的顶点仅为1时,则能得到有序的拓扑排序,否则无序 //边输入边判断,用contin ...

  10. Trouble Shooting

    情况是这样的,我在写一个类似于Online-Judge的系统,用python很容易实现,编译源程序,运行程序,最后比较程序输出与标准输出得出成绩.现在有个问题,万一程序运行时崩溃,比如出现除0异常,a ...