1、宽度自适应三列布局

　　三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。

　　同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>三列布局</title>

 <style>

 *{margin:0;padding:0;}

 #herder{

     height:50px;

     background:blue;

 }

 #main{

     width:100%;

     overflow:hidden;

 }

 #main .main-left{

     width:25%;

     height:800px;

     background:red;

     float:left;

 }

 #main .main-center{

     width:50%;

     height:800px;

     background:lightgreen;

     float:left;

 }

 #main .main-right{

     width:25%;

     height:800px;

     background:pink;

     float:right;

 }

 #footer{

     height:50px;

     background:gray;

 }

 </style>

 </head>

 <body>

 <div id="herder">页头</div>

 <div id="main">

     <div class="main-left">左列</div>

     <div class="main-center">中间</div>

     <div class="main-right">右列</div>

 </div>

 <div id="footer">页脚</div>

 </body>

 </html>

2、左右两列固定宽度，中间内容宽度自适应

　　要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页面就乱了，必须使用绝对定位来将三列固定在一行。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>两边固定中间自适应布局</title>

 <style>

 *{margin:0;padding:0;}

 #herder{

     height:50px;

     background:blue;

 }

 #main{

     width:100%;

     position:relative;

 }

 #main .main-left{

     width:200px;

     height:800px;

     background:red;

     position:absolute;

     left:0;

     top:0;

 }

 #main .main-center{

     height:800px;

     background:lightgreen;

     margin:0 310px 0 210px;

 }

 #main .main-right{

     width:300px;

     height:800px;

     background:pink;

     position:absolute;

     right:0;

     top:0;

 }

 #footer{

     height:50px;

     background:gray;

 }

 </style>

 </head>

 <body>

 <div id="herder">页头</div>

 <div id="main">

     <div class="main-left">左列</div>

     <div class="main-center">设计网页的第一步就是设计版面布局，搭建网站结构，网页排版的合理性，在一定程度上也影响着网站整体的布局以及后期的优化。一个好的网站形象能更容易地吸引用户、留住用户。因此，网站首页第一屏的排版非常重要，很多时候能决定用户的去与留。</div>

     <div class="main-right">右列</div>

 </div>

 <div id="footer">页脚</div>

 </body>

 </html>

DIV+CSS 网页布局之：三列布局的更多相关文章

  1. css常见的各种布局下----三列布局

    css 三列布局,左右固定宽度右边自适应 1不使用定位,只使用浮动可以实现左右固定,中间宽度自适应布局 1.1.1 自适应部分一定要放第一个位子,使用浮动,并且设置宽度为100%,不设置浮动元素内容不 ...

  2. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  3. 慕课笔记利用css进行布局【三列布局】

    三个div中间自适应,两侧固定大小 <html> <head> <title>三列布局</title> <style type="tex ...

  4. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  5. DIV+CSS 网页布局之：混合布局

    1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...

  6. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

  7. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  8. div+css网页标准布局实例教程（一）

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  9. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

随机推荐

  1. iOS开发之地图代理不起作用(提示vImage decode failed, falling back to CG path.)

    项目中用到了地图相关的东西,就把曾经的demo搬了出来,结果发现直接执行之前的demo没有问题,在xcode5下新建项目再把代码粘贴过来就会提示 May 5 11:36:21 infomedia-iP ...

  2. js返回上一页方法区别

    history.back(-1):直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在

  3. How Many Fibs_hdu_1316(大数).java

    How Many Fibs? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  4. Top 10 Mistakes Java Developers Make--reference

    This list summarizes the top 10 mistakes that Java developers frequently make. #1. Convert Array to ...

  5. 神奇的 BlocksKit（1）：源码分析（下）

    私有类 _BKObserver _BKObserver 是用来观测属性的对象,它在接口中定义了 4 个属性: @property (nonatomic,readonly,unsafe_unretain ...

  6. Android 自定义View修炼-仿360手机卫士波浪球进度的实现

    像360卫士的波浪球进度的效果,一般最常用的方法就是 画线的方式,先绘sin线或贝塞尔曲线,然后从左到右绘制竖线,然后再裁剪圆区域. 今天我这用图片bitmap的方式,大概的方法原理是: (1)首先用 ...

  7. modelsim仿真时让状态机波形显示状态的名字

    在使用Verilog编写有限状态机等逻辑的时候,状态机的各个状态通常以参数表示(如IDLE等).当使用ModelSim仿真的时候,状态机变量在wave窗口中以二进制编码的形式显示,如下面所示,这种显示 ...

  8. Git之路--1

    昨天下午到今天早上,终于搞定了github.过程很难过,不过看到自己的github上有代码了.还是小小的开心了一下.暂时没时间分享相关技术,附带微博链接,有想试试上传上Github的小伙伴可以查看我的 ...

  9. java ssh框架入门

    源码:http://pan.baidu.com/s/1hspUOKG

  10. 如何在eclipse使用StaggeredGridView

    概述  现在的开发工具基本都用AndroidStudio了.网上的开源框架也是.比如做瀑布式UI的StaggeredGridView,还有导航页的PagerSlidingTabStrip等. 那么电脑 ...