面试中关于左右固定中间自适应解决方案

最新推荐文章于 2023-09-02 10:36:44 发布

chen_晨风

最新推荐文章于 2023-09-02 10:36:44 发布

阅读量186

点赞数

分类专栏： # css与h5系列

本文链接：https://blog.csdn.net/qq_37674616/article/details/91660592

版权

css与h5系列专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

中间自适应布局
解决方案
各种方法的优缺点

中间自适应布局

描述如下：假定高度已知，请写出三栏布局，其中左栏、右栏宽度各自为300px，中间自适应。

解决方案

一、采用左右浮动

浮动可以使之后的元素忽视本元素的存在(即本元素不占据空间大小)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>左右固定中间适应</title>
	<link rel="stylesheet" href="">
	<style>
		*{
			margin:0;
			padding: 0;
		}
		div{
			min-height: 500px;

		}
		.left{
			float: left;
			width: 150px;
			background-color: red;
		}
		
		.center{
			margin: 0 200px  0 150px; /*上 右 下 左*/
			/*margin-left: 150px;
			margin-right: 200px;*/
			background-color: blue;
		}
		.right{
			float: right;
			width: 200px;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="container">

		<div class="left"></div>
		<div class="right"></div>
		<div class="center">
			<p>center</p>
		</div>
		
	</div>
</body>
</html>

**:该方法 center一定要放到最后，因为如果放到中间center是占据空间的浮动元素则不能上去(除非使用定位元素) 具体做法如下:

<style>
.right{
    /*float: right;*/
    position: absolute;
    right: 0;
    top:0;
    width: 200px;
    background-color: orange;
}
</style>
<div class="container">
    <div class="left"></div>
    <div class="center">
        <p>center</p>
    </div>
    <div class="right"></div>	
</div>

二、采用定位元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>左右固定中间适应</title>
	<link rel="stylesheet" href="">
	<style>
		*{
			margin:0;
			padding: 0;
		}
		div{
			height: 500px;
		}
		.left,.right{
			position: absolute;
			width: 200px;
			top:0;
		}
		.left{
			left: 0;
			background-color: yellow;
		}
		.center{
			margin: 0 200px;
			background-color: blue;
		}
		.right{
			right:0;
			background-color: orange;
		}
	</style>
</head>
<body>
	<div class="container">

		<div class="left"></div>
		<div class="center">
			<p>center</p>
		</div>
		<div class="right"></div>	
	</div>
</body>
</html>

三、采用flex布局

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>左右固定中间适应</title>
	<link rel="stylesheet" href="">
	<style>
		*{
			margin:0;
			padding: 0;
		}
		div{
			height:500px;
		}
		.container{
			display: flex;
		}
		.left,.right{
			width: 100px;
		}
		.left{
			background-color: yellow;
		}
		.center{
			flex:1;
			background-color: blue;
		}
		.right{
			background-color: orange;
		}
		
	</style>
</head>
<body>
	<div class="container">

		<div class="left"></div>
		<div class="center">
			<p>center</p>
		</div>
		<div class="right"></div>	
	</div>
</body>
</html>

四、浮动+负margin

该方法让一个父元素浮动起来充满全屏，然后让center元素用margin占据空间。此时left采用margin-left:-100%(与wrapwidth相同)就浮动到最右边；right同理。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>左右固定中间适应</title>
	<link rel="stylesheet" href="">
	<style>
		*{
			margin:0;
			padding: 0;
		}
		.wrap{
			width: 100%;
			height: 500px;
			background-color: yellow;
			float: left;
		}
		.center{
			margin:0 200px;
			height: 500px;
			background-color: blue;
		}
		.left,.right{
			width: 200px;
			height: 500px;
		}
		.left{
			float: left;
			margin-left: -100%;
			background-color: orange;
		}
		.right{
			float:right;
			margin-left: -200px;
			background-color:#ededed;
		}
		
	</style>
</head>
<body>
	<div class="container">
		<div class="wrap">
			<div class="center">
				<p>center</p>
			</div>
		</div>
		<div class="left"></div>
		<div class="right"></div>	
	</div>
</body>
</html>

关于margin负值的应用请参照该博主的整理:https://www.jianshu.com/p/549aaa5fabaa

五采用table布局

  <section class="layout table">
        <style>
            .layout.table .left-center-right{
                width: 100%;
                display: table;
                min-height: 200px;
            }
            .layout.table .left-center-right>div {
                display: table-cell;
            }
            .layout.table .left{
                width: 300px;
                background-color: aliceblue;
            }
            .layout.table .right{
                width: 300px;
                background-color:beige;
            }
            .layout.table .center{
                background-color: cornsilk;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                table 左中右布局
            </div>
            <div class="right"></div>
        </article>
    </section>

六采用网格布局

  <section class="layout grid">
        <style>
            .layout.grid .left-center-right{
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left{
                background-color: aqua;
            }
            .layout.grid .center{
                background-color:orange;
            }
            .layout.grid .right{
                background-color: aqua;
            }
        </style>
        <article class="left-center-right">
            <div class="left"></div>
            <div class="center">
                网格左中右布局
            </div>
            <div class="right"></div>
        </article>
    </section>

关于更多网格知识参考阮一峰日志点击传送

各种方法的优缺点

name	优点	缺点
浮动	兼容性好	需要消除对周边元素的影响
绝对定位	快捷方便	脱离文档流后，对其他元素产生影响，不容易控制
flex	兼容性好，容易操作（i8以上）	作用于一维坐标
table	兼容性好	某一栏高度变化会导致其它同步变高
grid	grid布局用法和flex相似，但是作用于二维布局

chen_晨风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面试中关于左右固定中间自适应解决方案

文章目录中间自适应布局解决方案一、采用左右浮动二、采用定位元素三、采用flex布局四、浮动+负margin五采用table布局六采用网格布局中间自适应布局描述如下：假定高度已知，请写出三栏布局，其中左栏、右栏宽度各自为300px，中间自适应。解决方案一、采用左右浮动浮动可以使之后的元素忽视本元素的存在(即本元素不占据空间大小)<!DOCTYPE html><h...
复制链接

扫一扫