前端笔试题：三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（3种方法）

最新推荐文章于 2021-08-03 20:42:35 发布

Zorephp

最新推荐文章于 2021-08-03 20:42:35 发布

阅读量724

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Zorephp/article/details/83120418

版权

第一种方法：绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        *{
			margin:0;
			padding:0;
		}
		.box{
			position: relative;
		}
		#left,#center,#right{
			height: 300px;
		}
		#left{
			position: absolute;
			top:0;
			left:0;
			width: 100px;
			background-color: pink;
		}
		#center{
			position: absolute;
			top:0;
			left:100px;
			right:100px;
			bottom:0;
			background-color: red;
		}
		#right{
			position: absolute;
			top:0;
			right: 0;
			width: 100px;
			background-color: blue;
		}

	</style>
</head>
<body>
	<div class="box">
		<div id="left"></div>
		<div id="center"></div>
		<div id="right"></div>
	</div>
</body>
</html>

第二种方法：flex布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        *{
			margin:0;
			padding:0;
		}
		.box{
			display: flex;
		}
		#left{
			background-color: pink;
			height: 300px;
			width: 100px;
		}
		#center{
			background-color: red;
			height: 300px;
			flex:1;
		}
		#right{
			background-color: blue;
			height: 300px;
			width: 100px;
		}
	</style>
</head>
<body>
	<div class="box">
		<div id="left"></div>
		<div id="center"></div>
		<div id="right"></div>
	</div>
</body>
</html>

第三种方法：浮动

必须是center放在最后

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#left,#center,#right{
			height: 300px;
		}
		#left{
			float: left;
			width: 100px;
			background-color: pink;
		}
		#right{
			float: right;
			width: 100px;
			background-color:blue;
		}
		#center{
			margin-left: 100px;
			margin-right: 100px;
			background-color: red;
		}
		
	</style>
</head>
<body>
	<div id="left"></div>
	
	<div id="right"></div>

	<div id="center"></div>
</body>
</html>

Zorephp

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端笔试题：三个DIV要求水平对齐，左右两个DIV宽度固定为100px，中间那个DIV充满剩余的宽度（3种方法）

第一种方法：绝对定位&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ margin:0;
复制链接

扫一扫