网站上使用三列布局的还是比较多的,不过三列和两列有些相似：

1.自适应三列

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>三列自适应布局</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	height: 300px;

  	margin:0 auto;

  }

  .left{

  	float: left;

  	width: 33.3%;

  	height: 300px;

  	background-color: #ccc;

  }

  .middle{

  	float:left;

  	width: 33.3%;

  	height: 300px;

  	background-color: #9c9c9c;

  }

  .right{

  	float: right;

  	width: 33.3%;

  	height: 300px;

  	background-color: #198610;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left"></div>

		<div class="middle"></div>

		<div class="right"></div>

	</div>

</body>

</html>

　　

2.固定两列，自适应中间一列

这个要考虑多种情况，我就遇见过下面的情况，大家可以看看

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>三列两固定中列自适应布局</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	height: 300px;

  	margin:0 auto;

  }

  .left{

  	float: left;

  	width: 200px;

  	height: 300px;

  	background-color: #ccc;

  }

  .middle{

  	margin-left:200px;

  	margin-right:200px;

  	height: 300px;

  	background-color: #9c9c9c;

  }

  .right{

  	float: right;

  	width: 200px;

  	height: 300px;

  	background-color: #198610;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left"></div>

		<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

		<div class="right"></div>

	</div>

</body>

</html>

　　

这个是下面截图的样子

看见没有，是这样的，但是如果我吧<div class="middle">放在最后，效果又不一样

所以这个效果达到效果，这个也是三列布局，所以这个方式有点bugger，大家可以注意

我们可以用用绝对定位，其实实现三列布局很多种方式，你也可以用table来实现，li来实现等方法

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>三列两固定中列自适应布局</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	height: 300px;

  	margin:0 auto;

  	position: relative;

  }

  .left{

  	position: absolute;

  	left: 0px;

  	top: 0px;

  	width: 200px;

  	height: 300px;

  	background-color: #ccc;

  }

  .middle{

  	margin-left:200px;

  	margin-right:200px;

  	height: 300px;

  	background-color: #9c9c9c;

  }

  .right{

  	position: absolute;

  	top: 0px;

  	right: 0px;

  	width: 200px;

  	height: 300px;

  	background-color: #198610;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left"></div>

		<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

		<div class="right"></div>

	</div>

</body>

</html>

3.固定三列

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>三列两固定中列自适应布局</title>

</head>

<style>

  .wrapper{

  	width: 880px;

  	height: 300px;

  	margin:0 auto;

  	position: relative;

  }

  .left{

  	float: left;

  	width: 200px;

  	height: 300px;

  	background-color: #ccc;

  }

  .middle{

  	float: left;

  	width: 480px;

  	height: 300px;

  	background-color: #9c9c9c;

  }

  .right{

  	float: left;

  	width: 200px;

  	height: 300px;

  	background-color: #198610;

  }

</style>

<body>

	<div class="wrapper">

		<div class="left"></div>

		<div class="middle">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>

		<div class="right"></div>

	</div>

</body>

</html>

我们这里都是做悬浮做了三列固定导航，如果在<div class="wrapper"></div>

后加上一个<div class="footer"></div>  那么就要清除悬浮，清楚悬浮的方式有几种，后面我们会讲到 clear:both;或者在wrapper的类中加入 overflow:hidden. 或 :after :before等伪类的定义，清除悬浮

css布局之三列布局的更多相关文章

  1. 简单的CSS网页布局--一二列布局

    1.一列布局 (一)一列自适应 自适应浏览器,随着浏览器的拉伸而变化,一般宽度采用百分比的写法,很简<!DOCTYPE html> <html> <head lang=& ...

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

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

  3. css实现三列布局，左右固定值，中间自适应。

    这里主要用到的是position:absolute;及margin属性;代码很简单,一看就明白. <!DOCTYPE html> <html lang="zh_CN&quo ...

  4. CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  5. [CSS布局]3列布局：左右两列固定宽度、中间列自适应满宽

    一种常见的3列布局,左右两列固定宽度.中间列自适应满宽.整个网页不出现横向滚动条 纯CSS实现 效果图: 代码: <!DOCTYPE html> <html lang="e ...

  6. 一、CSS实现横列布局的方法总结

    一.使用float实现横列布局的方法 如下面所示:DIV1和DIV2都可以选择向左或者向右浮动50%来实现展示在同一行 div1 div2 实现下面图片中布局的css样式如下: 分析: 1.第一行第一 ...

  7. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  8. css布局之一列布局

    在我们浏览网页中经常看见一列布局其实一列布局就是 一般的一列布局的都是固定宽度的 body{margin:0;padding:0} .main{width:800px;height:300px;bac ...

  9. CSS实现三列布局

    三列布局指的是两边两列定宽,中间的宽度自适应. 常用三种方法: 定位 浮动 弹性盒布局 定位方式 最直观和容易理解的一种方法,左右两栏选择绝对定位,固定于页面的两侧,中间的主体选择用margin确定位 ...

随机推荐

  1. curl提交数据时中文乱码

    1.使用curl提交数据时中文乱码解决: <?php $testJSON=array('name'=>'中文字符串','value'=>'test'); foreach ( $tes ...

  2. C#写WPF程序，SQLSever2008 提示插入数据成功,却查询不到数据

    1.提示存储成功,但是数据库中没有数据.今天在用C#写一个wpf程序时,要向数据库Sql server2008 中插入数据,程序提示成功,但打开数据库却没有值; 经过查询发现,数据存储到默认路径下的数 ...

  3. 【SSO单点系列】（3）：CAS4.0 登录页验证码的添加

    2016.08.23 更新 注意:这个教程只适合4.0版本的,4.1以及以上的版本的已经不试用了, 后面几篇有人提到过 源码网盘链接更新了下 : 链接: http://pan.baidu.com/s/ ...

  4. python学习笔记六 面向对象相关下(基础篇)

    面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以将多函数中公用的变量封装到对象中) 对象,根据模板创建的 ...

  5. 弹窗的封装（css,js） 和弹窗的例子

    //每个弹窗的标识 var x =0; var idzt = new Array(); var Window = function(config){ //ID不重复 idzt[x] = "z ...

  6. 【Spring】Spring的定时任务

    > 参考的优秀文章 Task Execution and Scheduling > 版本说明 <dependencies> <dependency> <gro ...

  7. [四校联考P3] 区间颜色众数 (主席树)

    主席树 Description 给定一个长度为 N 颜色序列A,有M个询问:每次询问一个区间里是否有一种颜色的数量超过了区间的一半,并指出是哪种颜色. Input 输入文件第一行有两个整数:N和C 输 ...

  8. [问题2014S07] 解答

    [问题2014S07]  解答  (本解答由沈启帆同学提供) 由复旦高代教材 P265 引理 7.4.1 知 \(F(P_i(\lambda)^{e_i})\) 的不变因子组为 \[1,\cdots, ...

  9. [问题2014S14] 解答

    [问题2014S14]  解答 首先, 满足条件的 \(\varphi\) 的全体特征值都为零. 事实上, 任取 \(\varphi\) 的特征值 \(\lambda\), 对应的特征向量为 \(0\ ...

  10. 怎样在excel中添加下拉列表框

    用excel2013打开要编辑的工作表,例子是一个班级名单,可以看到政治面貌目前还没有填写   接着我们找一个空白处,依次写入政治面貌的可能选项: 群众.共青团员   然后选中“政治面貌”这一列,点击 ...