三种方法实现CSS三栏布局

时间：2022-08-30 17:07:05

本文由云+社区发表

作者：前端林子

本文会分别介绍三种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布局时，要把中间栏放在左栏、右栏后面，左栏和右栏的顺序不定

实现的效果如下：

三种方法实现CSS三栏布局自身浮动实现三栏布局

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布局时，要把中间栏放在第一个

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

实现的效果如下：

三种方法实现CSS三栏布局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三栏布局

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

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

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

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

    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. sax xpath读取xml字符串

    public static void main(String[] args) throws ParserConfigurationException, SAXException, IOExceptio ...

  2. 02Spring&lowbar;Ioc和DI介绍

    什么是IOC? IoC: 控制反转, 解决程序对象紧密耦合问题(工厂+反射+ 配置文件), 将程序中原来构造对象的权限,交给IoC容器来构造,当程序需要对象,找IoC容器获取.

  3. Python与Hack之Unix口令

    1.在实验时候,先导入crypt库:必须在Unix环境下才能实现这个模块 2.代码贴一下,以后有了Unix环境试试吧: import cryptimport syssys.modules['Crypt ...

  4. 推荐《HeadFirst设计模式》

    相对于国内初版的<大话设计模式>,HeadFirst真的是更好的选择,虽然看起来很厚.很吓人,但对于初学者而言浅显易懂.直击要点,即使对设计模式熟悉的同学去读这本书相信也有很大的收获.用了 ...

  5. 【leetcode❤python】342&period; Power of Four

    #-*- coding: UTF-8 -*- class Solution(object):    def isPowerOfFour(self, num):        ""& ...

  6. P1233&colon; &lbrack;Usaco2009Open&rsqb;干草堆tower

    这道题,首先想到的就两个,一是贪心,二是动规,然而 1<=N<=100000;1<=w_i<=10000 的数据范围实在不敢恭维,所以说第一想法是错的.仔细一想,首先,我们需要 ...

  7. &lbrack;转&rsqb;centos7 安装jdk11 并设置默认java版本

    https://www.server-world.info/en/note?os=CentOS_7&p=jdk11&f=2 OpenJDK 11 : Install 2018/10/1 ...

  8. Docker入门 - 004 Docker 容器使用

    Docker 客户端 docker 客户端非常简单 ,我们可以直接输入 docker 命令来查看到 Docker 客户端的所有命令选项. docker 可以通过命令 docker command -- ...

  9. Java Mongo 自定义序列化笔记

    从insert方法入手 1. org.springframework.data.mongodb.repository.support.SimpleMongoRepository.java   inse ...

  10. &lt&semi;编写有效用例&gt&semi;读书笔记3

    <编写有效用例>读书笔记3 第三部分主要内容是对忙于编写用例的人的提示第20章:对每个用例的提示1.每个用例都是一篇散文:这个提示提醒我们将注意力集中与文字而不是图画上,同时帮助了解将要遇 ...

相关文章