CSS布局两边固定中间自适应

最新推荐文章于 2024-06-26 11:38:48 发布

门门men

最新推荐文章于 2024-06-26 11:38:48 发布

阅读量107

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Menqq/article/details/115248908

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

两边自适应中间固定

flex布局（利用flex-grow进行布局）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			.wrap{
				display:flex;
				flex-direction:row;
				margin-top:20px;
			}
			.center{
				width:800px;
				text-align:center;
				background:#ccc;
			}
			.left,.right{
				/*flex-grow 属性用于设置或检索弹性盒的扩展比率。*/
	                        flex-grow: 1;
	                        line-height: 30px;
	                        background:red;
	                }
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">left</div>
			<div class="center">center</div>
			<div class="right">right</div>
		</div>
	</body>
</html>

CSS3布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div[class=me] { 
                display: -webkit-box;
            }
            div div { 
                background: red; 
                height: 100px;
            }
            div div:nth-child(1) {
                -webkit-box-flex:1;
            }
            div div:nth-child(2) { 
                width: 800px; 
                background: #ccc;
            }
            div div:nth-child(3) {
                -webkit-box-flex:1;
            }
        </style>
    </head>
    <body>
        <div class="me">
            <div>left</div>
            <div>center</div>
            <div>right</div>
        </div>
    </body>
</html>

左右利用calc()函数计算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#container{
				height:200px;
				width: 100%;
			}
			
			#left,#right{
				float:left;
				background-color:#ccc;
				height:100%;
				width: calc(50% - 500px);
			}
			#center{
				float:left;
				background-color:yellow;
				height:100%;
				width:1000px;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left">left</div>
			<div id="center">center</div>
			<div id="right">right</div>
		</div>
	</body>
</html>