本文由云+社区发表

作者：前端林子

本文会分别介绍三种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. vs2015配置OpenCV遇到的问题

    OpenCV的配置过程可以参考博文:https://www.cnblogs.com/linshuhe/p/5764394.html 简要记载配置过程: 1.官网下载OpenCV安装包,并解压到目录,例 ...

  2. c# Exchange 收件箱获取。

    public List<Email> GetInbox() { try { List<Email> lstEmails = new List<Email>(); F ...

  3. ASP.NET MVC 网页应用 action 传递的Model

    视图界面 @using {引用模型} @model {具体模型} <html> @Model.{具体模型的属性} </html> 注意区分Model的大小写 引入时,使用@mo ...

  4. 无需sendmail：巧用LD_PRELOAD突破disable_functions

    *本文原创作者:yangyangwithgnu,本文属FreeBuf原创奖励计划,未经许可禁止转载 摘要:千辛万苦拿到的 webshell 居然无法执行系统命令,怀疑服务端 disable_funct ...

  5. 最新鲜最详细的Android SDK下载安装及配置教程

    //来源: http://www.cnblogs.com/summary-2017/p/8073225.html 最近Neo突发神经,想要将学过的一些计算机视觉.机器学习中的算法都放到移动设备上去跑跑 ...

  6. Where is the Marble? （寻找大理石上的数字）

    (先上题目) (题目描述)Raju and Meena love to play with Marbles. They have got a lot of marbles with numbers w ...

  7. 数据调试~~TCP转串口、串口转TCP调试

    Android socket开发了一个socket客户端,当输入服务器ip以及端口,建立连接之后,Android可以发送数据到电脑接收服务器端. 如果电脑端没有socket服务器怎么办?方法如下: 1 ...

  8. Mesos源码分析(4) Mesos Master的启动之三

    3. ModuleManager::load(flags.modules.get())如果有参数--modules或者--modules_dir=dirpath,则会将路径中的so文件load进来   ...

  9. c++ 之bind使用

    网络编程中, 经常要使用到回调函数. 当底层的网络框架有数据过来时,往往通过回调函数来通知业务层. 这样可以使网络层只专注于 数据的收发, 而不必关心业务 在c语言中, 回调函数的实现往往通过函数指针 ...

  10. Lock、ReentrantLock、ReentrantReadWriteLock区别

    Lock Lock相比于synchronized具有更强大的功能,在jdk1.6之前,锁竞争激烈的情况下使用lock的实现类ReentrantLock甚至比synchronized具有更好的性能,1. ...