本文由云+社区发表

作者：前端林子

本文会分别介绍三种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. 安装xlwt和xlrd

    因为想用python实现读写excel.百度了下,要安装xlwt和xlrd,网上各种方法,很多都不便利.最后利用pip安装很方便. 第一步:浏览器检索“xlwt安装”,点击第一个网页(百度) 即出现如 ...

  2. yii2 httpClient的用法

    yii2 httpClient的用法示例: <?php /* * @Purpose : yii2 httpClient 请求示例 * @Author : Chrdai * @Time : 201 ...

  3. ajaj简介

    1. 什么是ajax? ajax的全称 Asynchronous(异步) JavaScript and XML. ajax是一种用于创建快速动态网页的技术. 主要用于前后台的交互,在前后台的交互中还有 ...

  4. swust oj 1014

    交换排序算法的设计与实现——冒泡排序 1000(ms) 10000(kb) 2640 / 7503 编程实现冒泡排序,按照非递减排序,测试数据为整数. 输入 第一行是待排序数据元素的个数: 第二行是待 ...

  5. CRT破解版

    1.先去https://www.ttrar.com/html/VanDyke-SecureCRT.html上面下载一个CRT软件 2.下载一个注册机 http://www.ddooo.com/soft ...

  6. Spring IOC容器基本原理

    2.2.1 IOC容器的概念IOC容器就是具有依赖注入功能的容器,IOC容器负责实例化.定位.配置应用程序中的对象及建立这些对象间的依赖.应用程序无需直接在代码中new相关的对象,应用程序由IOC容器 ...

  7. 【安富莱专题教程第7期】终极调试组件Event Recorder，各种Link通吃，支持时间和功耗测量，printf打印，RTX5及中间件调试

    说明:1.继前面的专题教程推出SEGGER的RTT,JScope,Micrium的uC/Probe之后,再出一期终极调试方案Event Recoder,之所以叫终极解决方案,是因为所有Link通吃.  ...

  8. Redis安装及使用详解

    推荐在Linux系统上安装,这里我采用CentOS6: Redis采用3.0.0版本,官网下载即可 由于Redis是C语言编写,需要安装gcc(部分Linux自带gcc) yum install gc ...

  9. [Swift]LeetCode812. 最大三角形面积 | Largest Triangle Area

    You have a list of points in the plane. Return the area of the largest triangle that can be formed b ...

  10. linux终端文本编辑神器vi的使用

    vi —— 终端中的编辑器 目标 vi 简介 打开和新建文件 三种工作模式 常用命令 分屏命令 常用命令速查图 01. vi 简介 1.1 学习 vi 的目的 在工作中,要对 服务器 上的文件进行 简 ...