前端面试：两边固定，中间自适应布局_前端面試自適應佈局-CSDN博客

本文链接：https://blog.csdn.net/elite_zhou/article/details/115277537

本文探讨了前端布局中常见的几种方法，包括普通实现、绝对定位、自身浮动法、双飞翼布局和圣杯布局。特别强调了双飞翼布局和圣杯布局的实现步骤及优缺点，这两种布局方式在处理两边固定，中间自适应的场景中十分实用，但需要注意布局元素的顺序和定位策略，以确保在不同屏幕尺寸下的适配性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

普通实现

<style>
	.box{
		display:flex
	}
	.left,.right{
		width:200px
		height:600px
		background:red
	}
	.center{
		width:100%
		height:600px
		background:greed
	}
</style>

<body>
	<div class="box">
		<div class="left"></div>
		<div class="center"></div>
		<div class="right"></div>
	</div>
</body>

绝对定位

将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，即可以使中间元素自适应屏幕宽度
该布局的好处，三个div顺序可以任意改变，不足是：因为绝对定位，如果页面上还有其他内容，top的值要小心处理，最好能够对css样式进行一个初始化，如果不对样式进行初始化，则两边和中间的值会对不齐。另外，随着窗口缩小，小于200px的时候，会发生压缩

<style>
	html,body{
		margin:0px;
		width:100%;
	}
	h3{
		height:100px;
		margin:20px 0 0;
	}
	#left,#right{
		width:200px;
		height:200px;
		background-color:red;
		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>

自身浮动法

对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在文档流中，使用margin指定左右外边距对其进行一个定位
该布局的好处是受外界影响小，但是不足是：三个元素的顺序，center必须放在最后，这是和绝对定位不一样的地方，center占据文档流位置，所以一定放在最后，左右两个元素位置没有关系，当浏览器窗口很小的时候，右边元素会被挤到下一行

<style>
	#left,#right{
		width:200px;
		height:200px;
		background-color:#ffe6b8;
	}
	#left{
		float:left;
	}
	#right{
		float:right;
	}
	#center{
		margin:0 210px;
		height:200px;
		background-color:red;
	}
</style>

<h3>使用 自身浮动法定位</h3>
<div id="left">我是左边</div>
<div id="right">我是右边</div>
<div id="center">我是中间</div>

双飞翼布局

该方法在网站布局中非常常见，也是面试考点，优点是三栏互相关联，有一定的抗性，需要注意的是，布局中间部分一定要放在前面，左右顺序不限制，对于left块的margin负值一定要等于wrap的宽度

<style>
	#wrap{
		width:100%;
		height:100px;
		background-color:#fff;
		float:left;
	}
	#wrap #center{
		margin:0 210px;
		height:100px;
		background-color:#ffe6b8;
	}
	#left,#right{
		float:left;
		width:200px;
		height:100px;
		background-color:darkorange;
	}
	#left{
		margin-left:-100%;
		background-color:lightpink;
	}
	#right{
		margin-left:-200px;
	}
</style>


<h3>使用 自身浮动法定位</h3>
<div id="wrap">
	<div id="center">我是中间</div>
</div>
<div id="left">我是左边</div>
<div id="right">我是右边</div>

圣杯布局

运用相对定位的方式，不需要将center单独包在一个div中，而是给三个元素共同包裹一个div

<div class="container">
    <div class="center">#center</div>
    <div class="left">#left</div>
    <div class="right">#right</div>
</div>

第一步

设置好三个元素的宽度，并且浮动，为左右两边留出空间

.container{
	padding-left:200px; /*预留左边空间为left的宽度 */
	padding-right:300px; /*预留右边空间为right的宽度 */
}
.center{
	float:left;
	width:100%;
	height:300px;
	background:red;
}
.left{
	float:left;
	width:200px;
	height:300px;
	background:green;
}
.right{
	float:left;
	width:300px;
	height:300px;
	background:blue;
}

第二步

通过-margin position把左边移动到左侧预留位置

.left {
  float: left;
  margin-left: -100%;   /* 移动到左侧，100%是一个父元素宽度，这里也就是.container的宽度 */
  position: relative;   /* 因为.container设置了padding */
  right: 200px;         /* 所以需要再向左移动自身宽度,left: -200px;也是可以的 */
  width: 200px;
  height: 300px;
  background: #e6a23c;
}

第三步

通过-margin把右侧移动到预留位置

.right {
  float: left;
  margin-right: -300px; /* 移动到右侧，自身宽度*/
  width: 300px;
  height: 300px;
  background: #f56c6c;
}

flex布局

<style>
	#box{
		width:100%;
		display: flex; 
		height: 100px;
		margin: 10px;
	}  
	#left_box,#right_box{
		width: 200px;
		height: 100px; 
		margin: 10px; 
		background-color: lightpink
	}  
	#center_box{ 
		flex:1; 
		height: 100px;
		margin: 10px; 
		background-color: lightgreen
	}  
</style>

<div id="box">  
     <div id="left_box"></div>  
     <div id="center_box"></div>  
     <div id="right_box"></div>  
</div>