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. 【S13】vector和string优先于动态分配的内存

    1.使用new动态分配内存,必须承担如下责任: a.使用delete释放内存: b.确保使用了正确的形式,delete与new的形式要匹配: c.不能重复delete. 2.使用vector和stri ...

  2. ThinkPHP函数详解：M方法

    M方法用于实例化一个基础模型类,和D方法的区别在于:1.不需要自定义模型类,减少IO加载,性能较好:2.实例化后只能调用基础模型类(默认是Model类)中的方法:3.可以在实例化的时候指定表前缀.数据 ...

  3. C# DataTable的詳細使用方法

    在项目中经经常使用到DataTable,假设DataTable使用得当,不仅能使程序简洁有用,并且可以提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTabl ...

  4. jqgrid表格列动态加载的实现

    选中几个测点名,在表格中就显示几列. 具体代码如下: function reloadGrid(postData){ $('#gridTable').jqGrid('GridUnload'); var ...

  5. [ES6] 23. Rest Parameters & Spread Parameters

    Rest Parameters: In ES5, when you don't know how many paramters will be passed in, you can use argum ...

  6. 【剑指offer】包括min函数的栈

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/26064213 剑指offer上的第21题,之前在Cracking the Coding i ...

  7. C# - 转换

    无论什么类型 它们存储的其实都是一系列的位 在将A类型转换为B类型时 如果能完整转换 那么系统会将两个操作数自动进行隐式转换 但也有可能因为A类型的存储位数比B类型的存储位数大 那么B类型可能就没有足 ...

  8. 如何去除CISCO交换机中的口令？？

    加电后按住交换机前面的那个按钮 灯不闪了以后松手这时交换机会进入switch:模式输入命令 flash然后 dir flash:你会发现有个 config.text 的文件 你的密码和配置都保存在那里 ...

  9. AIDL通信原理

    AIDL (Android Interface Definition Language),通过定义通信接口来实现进程间通信.这是Google提供的一种在安卓应用进程间通信的工具.所以要了解AIDL的通 ...

  10. thinkphp中关于rbac的两个session

    最近在做单点登录,需要session由sso的client生成.所以研究了下RBAC的类的代码. 有了这两个seesion就可以用rbac进行权限验证 $_SESSION[C('ADMIN_AUTH_ ...