中间自适应俩边固定

最新推荐文章于 2022-05-16 16:51:13 发布

原创最新推荐文章于 2022-05-16 16:51:13 发布 · 187 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

11 篇文章

订阅专栏

第一种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box div{
				height: 100px;
				position: absolute;
			}
			.box{
				background: blue;
				position: relative;
			}
			.left{
				width: 100px;
				background: red;
				left: 0;
				top: 0;
			}
			.right{
				width: 100px;
				background: green;
				right: 0;
				top: 0;
			}
			.center{
				background: #CCC;
				left: 100px;
				right: 100px;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="box">
		　　<div class="left">1</div>
		　　 <div class="center">2</div>
		　　<div class="right">3</div>
		</div>
	</body>
</html>

第二种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
    			display: flex;
    			background: red;
    			height: 100px;
			}
			.center{
				flex: 1;
    			height: 100px;
    			background: blue;
			}
			.left,.right{
				width: 100px;
			    height: 100px;
			    background: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
		    <div class="left">1</div>
		    <div class="center">2</div>
		    <div class="right">3</div>
		</div>
	</body>
</html>

第三种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>

			.left,.right{
				width: 100px;
			    height: 100px;
			    background: red;
			}
			.left{
				float: left;
			}
			.right{
				float: right;
			}
			.center{
				margin: 0 100px;
				height: 100px;
				background: blue;
			}
		</style>
	</head>
	<body>

		<div class="left">1</div>

	    <div class="right">3</div>

		<!--注意中间那块在最下面,因为如果放在上面浮动的div就在其下了-->
		<div class="center">2</div>

	</body>
</html>

第四种

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.left,.center,.right{
				float: left;
    			height: 100px;
			}
			.left,.right{
				width: 200px;
				background-color: red;
			}
			.center{
				width: calc(100% - 400px);
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="left">1</div>
		<div class="center">2</div>
		<div class="right">3</div>
	</body>
</html>

第五种(双飞翼布局)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.d1{
				background: red;
				float: left;
				width: 100%;
				height: 200px;

			}
			.d1 div{
				margin: 0 200px;
				background: yellow;
			}
			.d2{
				background: blue;
				float: left;
				margin-left: -100%;
				width: 200px;
				height: 200px;

			}
			.d3{
				background: green;
				height: 200px;
				width: 200px;
				float: left;
				margin-left: -200px;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<div>
				111
			</div>
		</div>
		<div class="d2">
			22222
		</div>
		<div class="d3">
			33333
		</div>
	</body>
</html>