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

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. 微信、qq信息汇总、回复（一）

    想法:        有的人喜欢用qq,有的人喜欢用微信,总而言之,是一个通信工具.        qq上有很多群,微信上有很多群,每个群挨个浏览一遍.回复,还容易回复错误,前言不接后语.       ...

  2. android获取状态栏高度

    获取android屏幕上状态栏的高度方法网上很多这里不再敖述,只举一个例子 Rect rect = new Rect();getWindow().getDecorView().getWindowVis ...

  3. 解读HTML 5新语法 提高语义价值

    HTML 5的新标记 设计者们需要完成的任务是要给HTML 5开发一个更丰富的和更有含义的语义,当然可以想象这种新方案将会是很灵活和很高效的,同时与所有的现代互联网标准相适应.下面就是一些将要在HTM ...

  4. ADB指令

    对于ADB指令的应用,首先应该配置环境,将文件所在路径复制到高级系统设置里面的环境变量path,然后就可以在命令符上进行ADB的指示 例如adb kill-server是关掉活动 adb start- ...

  5. zigbee学习之路(二)点亮LED

    一.前言 今天,我来教大家如何点亮led,这也是学习开发板最基础的步骤了. 二.原理分析 cc2530芯片跟虽然是51的内核,但是它跟51单片机还是有区别的,51单片机不需要对IO口进行配置,而cc2 ...

  6. sql注入过滤的公共方法

    /// <summary> ///SQL注入过滤 /// </summary> /// <param name="InText">要过滤的字符串 ...

  7. Android自定义View (二) 进阶

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24300125 继续自定义View之旅,前面已经介绍过一个自定义View的基础的例 ...

  8. monkey中的一些问题

    一起来看下导致App Crash的那些原因: 1.     空指针异常:错误日志定位java.lang.NullPointerException,详细日志记录如下 2.     安全异常:错误日志定位 ...

  9. ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题

    好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: ...

  10. 《BI那点儿事》数据流转换——导入列、导出列

    导入列: 导入列例子现在来做一个例子:创建路径D:\Pictures随便在路径D:\Pictures中粘贴4个比较小的图像文件命名为01.png.02.png.03.png.04.png在路径D:\P ...