三栏布局（左右宽度固定中间自适应）

最新推荐文章于 2024-12-04 20:35:30 发布

weixin_33978016

最新推荐文章于 2024-12-04 20:35:30 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b08102751882538aa1edf88

本文介绍了实现固定宽度侧边栏及自适应中间栏布局的七种常见方法，包括使用浮动、绝对定位、负边距、表格布局、Flex布局、Grid布局及通过BFC特性实现的布局方案。

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

要求：高度已知，左右两栏宽度固定为300px，中间自适应

方案一 float 浮动布局

<style>
	div{
		min-height:50px;
	}
	.left{
		width:300px;
		float:left;
		background: burlywood;
	}
	.right{
		width:300px;
		float:right;
		background: gold;
	}
	.middle{
		margin-left:300px;
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>
	<div class="right">右边</div>
	<div class="middle">中间</div>        <!--注意：middle放在下面-->
</div>
复制代码

方案二 absolute绝对定位

<style>
	div{
		min-height:50px;
	}
	.wrap{
		position:relative;
	}
	.left{
		position:absolute;
		left:0;
		top:0;
		width:300px;
		background: burlywood;
	}
	.right{
		position:absolute;
		right:0;
		top:0;		
		width:300px;
		background: gold;
	}
	.middle{
		margin-left:300px;
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：这里三个div顺序可以任意调整

方案三 margin负值

<style>
	div{
		min-height:50px;
	}
	.middle{
                float:left;
		width:100%;	
	}
	.middle .midIn{
		margin:0 300px;
		background:greenyellow;
	}
	.left{
		float:left;
		width:300px;
		margin-left:-100%;
		background: burlywood;
	}
	.right{	
		float:left;
		width:300px;
		margin-left:-300px;
		background: gold;
	}
</style>
复制代码

<div class="wrap">
	<div class="middle">
		<div class="midIn">中间</div>
	</div>
	<div class="left">左边</div>		
	<div class="right">右边</div>
</div>
复制代码

方案四 table表格布局

<style>
	div{
		min-height:50px;
	}
	.wrap{
		width:100%;  //不能忽略
		display:table;
	}
	.left{
		display: table-cell;
		width:300px;
		background: burlywood;
	}
	.right{	
		display: table-cell;
		width:300px;
		background: gold;
	}
	.middle{
        display: table-cell;	
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">	
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：三栏中一栏的高度变动，其他两栏也会随之变化

方案五 flex 弹性布局

<style>
	div{
		min-height:50px;
	}
	.wrap{
		display:flex;
		flex-direction: row;
	}
	.left{
		width:300px;
		background: burlywood;
	}
	.right{
		width:300px;
		background: gold;
	}
	.middle{
		flex:1;
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：写flex布局时要加浏览器内核前缀，并且只支持IE10及以上。

方案六 grid网格布局

<style>
	.wrap{
		display:grid; /*要加浏览器内核前缀*/
		grid-template:50px/300px 1fr 300px;
	}
	.left{   
		background: burlywood;
	}
	.right{
		background: gold;
	}
	.middle{
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：支持IE11及以上，Opera Mini等不兼容。网格布局入门参考文章：http://www.css88.com/archives/8661

方案七父元素生成BFC

<style>
	div{
	        min-height:50px;
	}
	.left{
		float:left;
		width:300px;
		background: burlywood;
	}
	.right{	
		float:right;
		width:300px;
		background: gold;
	}
	.middle{
		overflow:hidden;
		width:100%;
		background:greenyellow;
	}
</style>
复制代码

<div class="middle">
	中间
	<div class="left">左边</div>	
	<div class="right">右边</div>
</div>
复制代码

依据BFC布局原理：BFC的区域不会与float box重叠

转载于:https://juejin.im/post/5b08102751882538aa1edf88