实现三栏布局的这三种方式,面试笔试重点,一定掌握

最新推荐文章于 2024-06-02 14:38:36 发布

coder吹雪

最新推荐文章于 2024-06-02 14:38:36 发布

阅读量133

点赞数

分类专栏：前端前端面试题文章标签：定位 css html js javascript

本文链接：https://blog.csdn.net/qq_43623970/article/details/105634694

版权

前端同时被 2 个专栏收录

103 篇文章 5 订阅

订阅专栏

前端面试题

23 篇文章 1 订阅

订阅专栏

本文介绍了实现三栏布局的三种常见方法：1) 圣杯布局和双飞翼布局，利用绝对定位实现，需要注意定位时的top值处理；2) 绝对定位方法，通过左右div的绝对定位来创建布局，但可能导致其他内容受影响；3) 自身浮动法，左右元素浮动，中间元素使用margin定位，布局稳定但受限于元素顺序。

摘要由CSDN通过智能技术生成

1.圣杯布局和双飞翼布局

绝对定位方法

左右div设置为绝对定位；左div设置为 left: 0px;右div设置为 right: 0px;

如：

	<!DOCTYPE html>
	<html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title>Title</title>
	    </head>
	    <style>
	        html,body{
	            margin: 0px;
	            width: 100%;
	        }
	        h3{
	            height: 100px;
	            margin: 20px 0 0;
	        }
	        #left,#right{
	            width: 200px;
	            height: 200px;
	            background-color: #ffe6b8;
	            position: absolute;
	            top: 120px;
	        }
	        #left{
	            left: 0px;
	        }
	        #right{
	            right: 0px;
	        }
	        #center{
	            margin: 2px 210px;
	            background-color: #eee;
	            height: 200px;
	        }
	    </style>
	<body>
	    <h3>实现三列宽度自适应布局</h3>
	    <div id="left">我是左边</div>
	    <div id="right">我是右边</div>
	    <div id="center">我是中间</div>
	</body>
	</html>

该布局的不足：因为是绝对定位，如果页面上有其他的内容，top的值要小心处理，最好给CSS样式进行一个初始化。

3.使用自身浮动法

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

如下：

	<!DOCTYPE html>
	<html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title>Title</title>
	    </head>
	    <style>
	        html,body{
	            margin: 0px;
	            width: 100%;
	        }
	        h3{
	            height: 100px;
	            margin: 20px 0 0;
	        }
	        #left,#right{
	            width: 200px;
	            height: 200px;
	            background-color: #ffe6b8;
	        }
	        #left{
	            float: left;
	        }
	        #right{
	            float: right;
	        }
	        #center{
	            margin: 2px 210px;
	            background-color: #eee;
	            height: 200px;
	        }
	    </style>
	<body>
	    <h3>实现三列宽度自适应布局</h3>
	    <div id="left">我是左边</div>
	    <div id="right">我是右边</div>
	    <div id="center">我是中间</div>
	</body>
	</html>