实现左右固定，中间自适应布局

最新推荐文章于 2024-08-03 23:03:36 发布

夏肖潇

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量769

点赞数

分类专栏：前端面试总结文章标签： css

本文链接：https://blog.csdn.net/xxh20171777/article/details/111589604

版权

前端面试总结专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章目录

经典布局
一、圣杯布局
二、双飞翼布局
三、使用CALC（css3中提供的一个计算公式）
四、flex（若不考虑兼容，首选flex）
五、定位（若考虑兼容，选择定位）

经典布局

圣杯布局
双飞翼布局
通俗讲：左右固定，中间自适应

一、圣杯布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.container{
				padding: 0 200px;
				height: 100%;
			}
			.center{
				width: 100%;
				min-height: 300px;
				background-color: #A52A2A;
			}
			.left{
				width: 200px;
				min-height: 200px;
				background-color: #00FFFF;
			}
			.right{
				width: 200px;
				min-height: 400px;
				background-color: #00FFFF;
			}
			.center,.left,.right{
				float: left;
			}
			.left{
				margin-left: -100%;
				position: relative;
				left: -200px;
			}
			.right{
				margin-right: -200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center"></div>
			<div class="left"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

在这里插入图片描述

二、双飞翼布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;
				/* padding: 0;
				margin: 0; */
				
			}
			.container,.left,.right{
				float: left;
			}
			.container{
				width: 100%;
			}
			.left{
				width: 200px;
				min-height: 200px;
				background-color: #00FFFF;
			}
			.right{
				width: 200px;
				min-height: 200px;
				background-color: #000000;
			}
			.container .center{
				margin: 0 200px;
				min-height: 400px;
				background-color: #A52A2A;
				
			}
			.left{
				margin-left: -100%;
			}
			.right{
				margin-left: -200px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="center"></div>
		</div>
		<div class="left"></div>
		<div class="right"></div>
	</body>
</html>

在这里插入图片描述

三、使用CALC（css3中提供的一个计算公式）

坚决不选，因为性能不好
在这里插入图片描述

四、flex（若不考虑兼容，首选flex）

<style type="text/css">
			html,body{
				overflow: hidden;
			}
			.container{
				display: flex;
				justify-content: space-between;
				height: 100%;
			}
			.left,
			.right{
				/* left、right既不放大（第一个0）也不缩小（第二个0），所占空间是200px */
				flex: 0 0 200px;
				height: 200px;
				background-color: #00FFFF;
				
			}
			.center{
				/* 不给具体大小，把剩余空间全部占据 */
				flex: 1;
				min-height: 400px;
				background-color: #000000;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	</body>

五、定位（若考虑兼容，选择定位）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				height: 100%;
				overflow: hidden;
			}
			.conntainer{
				position: relative;
				height: 100%;
			}
			.left,
			.right{
				position: absolute;
				width: 200px;
				top: 0;
				background-color: #00FFFF;
				min-height: 200px;
			}
			.center{
				margin: 0 200px;
				min-height: 400px;
				background-color: #A52A2A;
			}
			.left{
				left: 0;
			}
			.right{
				right: 0;
			}
		</style>
	</head>
	<body>
		<div class="conntainer">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

夏肖潇

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现左右固定，中间自适应布局

文章目录经典布局一、圣杯布局二、双飞翼布局三、使用CALC（css3中提供的一个计算公式）四、flex（若不考虑兼容，首选flex）五、定位（若考虑兼容，选择定位）经典布局圣杯布局双飞翼布局通俗讲：左右固定，中间自适应一、圣杯布局<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/cs
复制链接

扫一扫

专栏目录