本文由云+社区发表

作者：前端林子

本文会分别介绍三种CSS实现三栏布局的方法，可在浏览器中打开查看效果

1.方法一：自身浮动的方法

实现方法：需要左栏向左浮动，右栏向右浮动，中间设左右margin来撑开距离

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS实现三栏布局1</title>

	<style type="text/css">

		body{

			margin: 0;

			padding: 0;

		}

		.left{

			width:200px;

			height: 300px;

			background-color: #DC698A;

			float:left;

		}

		.middle{

			/*width:100%;*/

			/*中间栏不要设宽度，包括100%*/

			height: 300px;

			background-color: #8CB08B;

			margin:0 200px;

		}

		.right{

			width: 200px;

			height: 300px;

			background-color: #3EACDD;

			float: right;

		}

	</style>

</head>

<body>

	<!-- 左栏左浮右栏右浮，中间不设宽度用左右margin值撑开距离，且布局中中间栏放最后 -->

	<!-- 中间栏实际宽度是当前屏的100% -->

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

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

	<div class="middle">中间栏</div>

</body>

</html>

注意：该方法在html布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

实现的效果如下：

自身浮动实现三栏布局

2.方法二：margin负值法

实现方法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left设为-100%，中间栏的width设为100%，右栏的margin-left设为-右栏宽度

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS实现三栏布局2</title>

	<style type="text/css">

	body{

		margin:0;

		padding:0;

	}

	.left{

		width:200px;

		height: 300px;

		background-color: #DC698A;

		float:left;

		margin-left:-100%;

	}

	.middle{

		width:100%;

		height: 300px;

		background-color: #8CB08B;

		float:left;

	}

	.right{

		width:200px;

		height: 300px;

		background-color: #3EACDD;

		float: left;

		margin-left: -200px;

	}

	</style>

</head>

<body>

	<!-- 左栏中间栏右栏左浮，左栏margin-left：-100%，中间栏宽100%,，右栏margin-left:-右栏宽度

	且布局上必须中间栏放第一个-->

	<div class="middle">中间栏</div>

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

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

</body>

</html>

注意：该方法在html布局时，要把中间栏放在第一个

此方法是实现圣杯布局和双飞翼布局的基础。

实现的效果如下：

margin负值法实现三栏布局

3.方法三：绝对定位法

实现方法：左栏、右栏绝对定位，分别固定到页面左右两侧，中间栏不设宽度，用左右margin来撑开距离

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>CSS实现三栏布局3</title>

	<style type="text/css">

		body{

			margin:0;

			padding: 0;

		}

		.left{

			width:200px;

			height: 300px;

			background-color: #DC698A;

			position: absolute;

			left:0;

			top:0;

		}

		.middle{

			/*width: 100%;*/

			height: 300px;

			background-color: #8CB08B;

			margin:0 200px;

		}

		.right{

			width:200px;

			height: 300px;

			background-color: #3EACDD;

			position: absolute;

			right:0;

			top:0;

		}

	</style>

</head>

<body>

	<!-- 左右两栏绝对定位，分别固定到页面的左右两侧，中间栏不设宽度，用左右margin撑开距离 -->

	<!-- 中间栏的实际宽度是当前屏的100% -->

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

	<div class="middle">中间栏</div>

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

</body>

</html>

实现的效果如下：

此文已由腾讯云+社区在各渠道发布

获取更多新鲜技术干货，可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

三种方法实现CSS三栏布局的更多相关文章

  1. Android开发之去掉标题栏的三种方法,推荐第三种

    Android:去掉标题栏的三种方法和全屏的三种方法 第一种:一般入门的时候常常使用的一种方法 onCreate函数中增加下面代码: requestWindowFeature(Window.FEATU ...

  2. Delphi中三种方法获取Windows任务栏的高度

    第一种:需要引用Windows单元 ShowMessage(IntToStr(GetSystemMetrics(SM_CYSCREEN)-GetSystemMetrics(SM_CYFULLSCREE ...

  3. 设置css三种方法的优先级

    有的小伙伴问了,如果有一种情况:对于同一个元素我们同时用了三种方法设置css样式,那么哪种方法真正有效呢?在下面代码中就出现了这种情况 1.使用内联式CSS设置“超酷的互联网”文字为粉色. 2.然后使 ...

  4. Linux CentOS7 VMware 安装软件包的三种方法、rpm包介绍、rpm工具用法、yum工具用法、yum搭建本地仓库

    一.安装软件包的三种方法 Linux下游三种安装方法,rpm工具.yum工具.源码包.rpm按装一个程序包时,有可能因为该程序包依赖另一个程序包而无法安装:yum工具,可以连同依赖的程序包一起安装. ...

  5. CSS围住浮动元素的三种方法

    浮动元素脱离了文档流,其父元素看不到它了,因而不会包围它.浮动会“扩散”到下一个清除浮动的元素处.这会引起不想要的页面布局效果. 清除浮动的方法有三种: 1.父元素overflow:hidden 2. ...

  6. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  7. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  8. html布局 左右固定，中间只适应，三种方法实现

    html布局 左右固定,中间只适应,三种方法实现 使用自身浮动法定位 //html <h3>使用自身浮动法定位</h3> <div id="left_self& ...

  9. 【转】css清除浮动float的三种方法总结，为什么清浮动？浮动会有那些影响？

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

随机推荐

  1. PHP命名空间与自动加载类详解

    本文实例讲述了PHP命名空间与自动加载类.分享给大家供大家参考,具体如下: 今天我要给大家介绍的是PHP的命名空间 和 自动加载类 我先简单的分开演示 在放在一起 大家请看:什么是自动加载类? 想必大 ...

  2. Linux系统下zookeeper的安装和配置

    ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...

  3. myeclipse集成maven

    myeclipse集成maven 打开myeclipse---Window----Preferences---Maven4MyEclipse--Installations----Add,如图所示: 这 ...

  4. oc中的反射机制

    好久没有总结过了,一直在赶项目... 今天来总结一下OC中的反射机制,有什么不对的地方,还请多多海涵. 反射机制,简单的说就是在程序运行期间通过类的名字来动态的获取类的信息,从而实现动态的创建类,以及 ...

  5. 怎么过滤 &nbsp;

    replace(str, " ", ""); 就是这么简单

  6. Ansible配置免密登陆

    0x01:  把远程服务器的公钥来获取到本地 #ssh-keyscan ip1 ip2 ip3 ip4 >> /root/.ssh/known_hosts 完成后,/root/.ssh/k ...

  7. 【错误解决】Intellj（IDEA） warning no artifacts configured

    : warning no artifacts configured,,上面木有Artifacts的选项,,好尴尬, [解决方案]artifacts,是maven中的概念(项目是maven项目),由于没 ...

  8. Python开发虚拟环境使用virtualenvwrapper的搭建及pycharm链接步骤

    virtualenv 是一个创建隔绝的Python环境的工具.virtualenv创建一个包含所有必要的可执行文件的文件夹,用来使用Python工程所需的包.创建的环境是独立的,互不干扰,无需sudo ...

  9. [Swift]LeetCode65. 有效数字 | Valid Number

    Validate if a given string is numeric. Some examples:"0" => true" 0.1 " => ...

  10. 13.Git分支-变基（rebase）、rebase VS merge

    1.变基的基本操作 在Git中整合来自不同分支的修改主要有两种方法:merge和rebase. 看下面的例子: 开发任务分叉到了两个不同的分支,并且都有了新的提交. 这时候我们可以使用 git mer ...