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

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. 如何在普清的屏上调试CSS样式二倍图背景

    背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是 ...

  2. php连接Access数据库错误及解决方法

    <?php $connstr="DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" . realpath("data.m ...

  3. C#:判断软件运行的环境是否是Pad（PC）

    一.需求:Pad上显示某功能块,PC机上隐藏. 二.方法:从外围设备获取值判断是否是Pad. 三.具体参考代码如下: 1.外围设备值类型如下: public enum ChassisTypes { O ...

  4. Script 简单语句的练习题

    猜拳 <body>请输入剪刀或者石头或者布:<br /><input type="text" id="A"/><inp ...

  5. window resize的时候禁止频繁触发事件

    $(window).resize(function(){ var value=+new Date; assistantForSyncTask.execute(value); assistantForA ...

  6. Swashbuckle for asp.net core 配置说明

    0x00 安装 Swashbuckle 6.0 打开程序包管理器控制台,输入: Install-Package Swashbuckle -Pre 0x01 配置 Startup.cs public v ...

  7. easyui datagrid 仿ext—右键

    var createGridHeaderContextMenu = function(e, field) { e.preventDefault(); var grid = $(this);/* gri ...

  8. Normalize.css 初识

    一. 用来干嘛的 一个现代的.准备好了支持 HTML5 技术,并且要替代 CSS Reset 处理样式的理念. Normalize.css 使浏览器渲染所有元素更加一致,并且符合现代标准.它只是针对那 ...

  9. Failed to create the part's controls [eclipse]

    查看源码 出现 Failed to create the part's controls 解决方法: eclipse.ini  中添加: -startup plugins/org.eclipse.eq ...

  10. lambda的使用ret = filter(lambda x : x > 22 ,[11,22,33,44])

    #!/usr/bin/env python #def f1(x) : # return x > 22 ret = filter(lambda x : x > 22 ,[11,22,33,4 ...