本文由云+社区发表

作者：前端林子

本文会分别介绍三种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. 1.初识Node.js

    Node.js基础知识大汇总 1.下载并安装npm,检测安装是否成功(在命令行输入node -v,看是否会输出对应版本号) 2.写一个hello world 程序. (1).打开notepad,新建一 ...

  2. opencv imwrite保存图片花屏的问题

    问题:在项目中用opencv的imwrite保存图片出现花屏的问题,如下图: 思路:1.  因为项目中的图像数据(float类型,0-255)是在GPU中,保存的话:可以用CPU保存图片,也可以用GP ...

  3. RSP小组——团队冲刺博客四

    RSP小组--团队冲刺博客四 冲刺日期:2018年12月13日 前言 问题已经明确,经过今天的努力,部分已近得到解决,所以,今天是一个值得庆祝的日子. 各成员今日(12.13)完成的任务 李闻洲对音乐 ...

  4. python利用xlrd读取excel文件始终报错原因

    1.代码按照网上百度的格式进行书写如下: 但运行后,始终报错如下: 百度了xlrd网页: 分明支持xls和xlsx两种格式的文件,但运行始终报错. 最后找到原因是因为我所读取的文件虽然是以.xls命名 ...

  5. VS2017无法发现单元测试，不能运行单元测试的解决方案

    问题: 在VS2017中新建空的单元测试后,无法运行测试,即右键菜单的"运行测试"和"调试测试" 不能运行,在测试资源管理中也无法列出这个测试. 解决方案: 1 ...

  6. Java实现生产者与消费者模式

    生产者不断向队列中添加数据,消费者不断从队列中获取数据.如果队列满了,则生产者不能添加数据:如果队列为空,则消费者不能获取数据.借助实现了BlockingQueue接口的LinkedBlockingQ ...

  7. QT—QTextEdit控件显示日志

    功能:利用QTextEdit开发一个日志显示窗口.没有太多操作,需要实现的是日志自动向上滚动,总体的日志量可以控制在x行(比如300行)以内:其他的应用功能我后面继续添加 #include <Q ...

  8. 用java从0生成一个简单的excel

    用java从0生成一个简单的excel 目标 用代码实现对一个excel的基础操作,包括创建,插入文字,(好像就这些了),生成的excel可以用wps打开,如果直接用c++的文件流会生成假的xls表格 ...

  9. NOIP-珠心算

    题目描述 珠心算是一种通过在脑中模拟算盘变化来完成快速运算的一种计算技术.珠心算训练,既能够开发智力,又能够为日常生活带来很多便利,因而在很多学校得到普及. 某学校的珠心算老师采用一种快速考察珠心算加 ...

  10. 大数据计算框架Hadoop, Spark和MPI

    转自:https://www.cnblogs.com/reed/p/7730338.html 今天做题,其中一道是 请简要描述一下Hadoop, Spark, MPI三种计算框架的特点以及分别适用于什 ...