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. robotframework-FQA

    发现是一波三折,刚开始信步漫游,就又遇上了沟,整理一下吧:  1.WebDriverException: Message: 'geckodriver' executable needs to be i ...

  2. iOS开发中懒加载的使用和限制

    1.在开发过程中很多时候,很多控件和对象需要alloc为了,提高开发效率使得懒加载得以产生. 2.下边用代码解释: - (NSMutableArray *)newsArr{ if (!_newsArr ...

  3. uedit富文本编辑器

    问题: 1: An error occurred at line: 6 in the generated java fileOnly a type can be imported. com.baidu ...

  4. JS正则表达式验证表单

    一.解释一些符号相关的意义     1.  /^$/ 这个是个通用的格式.         ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置     2. 里面输入需要实现的功能.       ...

  5. 软中断&amp;tasklet&amp;工作队列

    软中断 软中断的分配时静态的(即在编译时定义),而tasklet的分配和初始化能够在执行时进行. 软中断(即便是同一种类型的软中断)能够并发地运行在多个CPU上. 因此,软中断是可重入函数并且必须明白 ...

  6. [转] JAVA正则表达式：Pattern类与Matcher类详解(转)

    java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包.它包括两个类:Pattern和 Matcher Pattern 一个Pattern是一个正则表达式经编译后的 ...

  7. Ubuntu远程桌面xrdp方法

    xrdp方式,该方法支持多用户登录并远程桌面. 首先在Ubuntu上安装GNOME界面,在终端输入命令: sudo apt-get install gnome-panel 安装完成后注销用户. 点击自 ...

  8. 关于js原型的面试题

    今天遇到关于javascript原型的一道面试题,现分析下: 原题如下: function A(){ } function B(a){ this.a = a; } function C(a){ if( ...

  9. IIS 返回 405 - 不允许用于访问此页的 HTTP 谓词。终极解决办法!!!!

    首先这个问题在其他网站(CSDN,新浪博客等) 回答基本都是没有回答到"根本"上面来(而且总在纠结要不要勾选"全部谓词") 我是自己对比了本地IIS之后得出的结 ...

  10. Maven笔记（二）仓库

    1.仓库布局 任何一个构件都有其唯一的坐标,根据这个坐标可以定义其在仓库中的唯一存储路径,这就是Maven的仓库布局方式 路径与坐标的对应关系为:groupId/artifactId/version/ ...