布局自适应一侧定宽

不使用float实现两边固定,中间自动扩展的布局

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>不使用float实现两边固定,中间自动扩展的布局</title>
    <style>
        .header{height:200px;background-color:red}
        .main{position:relative;zoom:1;}
        .main-left{position:absolute;left:0;top:0;width:300px;height:500px;background-color: yellow}
        .main-right{position:absolute;right:0;top:0;width:300px;height:500px;background-color: green}
        .main-center{height:500px;margin:0 300px;background-color: #aaaaaa}
        .footer{height:100px;background-color: #dddddd}
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="main">
        <div class="main-left">我是左侧我是左侧我是左侧我是左侧我是左侧我是左侧</div>
        <div class="main-center">我是中间我是中间我是中间我是中间我是中间我是中间</div>
        <div class="main-right">我是右侧我是右侧我是右侧我是右侧我是右侧我是右侧</div>
    </div>
    <div class="footer"></div>
</body>
</html>

负边距的”左边固定宽,右边自适应宽”。

<!DOCTYPE html>
<html>
<head>
<style>
*{margin:0px;padding:0px;}
#head{
	min-height:50px;
	width:100%;
	background-color: yellow;
}
#container {
	width:100%;
	float:right;
	margin-left:-200px;
}
#left{
	width:200px;
	height:200px;
	float:left;
	background-color: cyan;
}
#right{
	height:200px;
	margin-left:200px;
	background-color: red;
}
#right div{
	width:300px;
	background-color: green;
	clear:both;
}

#footer{
	min-height:50px;
	width:100%;
	background-color: blue;
	clear: both;
}

</style>
</head>
<body>
<div id="head"><h1>Header</h1></div>

<div id="left"><h1>Left Sidebar</h1></div>
<div id="container">
	<div id="right"><div><h1>Content</h1></div></div>
</div>

<div id="footer"><h1>Footer</h1></div>

</body>
</html>


CSS3中的box-flex  一侧定宽 自适应

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>box</title>
		<style type="text/css">
			body,div{
				margin: 0;
				padding: 0;
			}
			.box{
				background-color: green;
				display: -moz-box;
				display: -webkit-box;
				display: box;
				width: 100%;
			}
			.item:first-child{
				width: 200px;
				height: 80px;
				margin:10px;
				background-color: yellow;
			}
			.item:nth-child(2){
				background-color: red;
				height: 80px;
				-moz-box-flex: 1;
				-webkit-box-flex: 1;
				box-flex: 1;
				margin: 10px 0;
			}
			.item:last-child{
				background-color: orange;
				height: 80px;
				-moz-box-flex: 1;
				-webkit-box-flex: 1;
				box-flex: 1;
				margin:10px;
			}
			/*这里貌似如果.box设置了左右padding,分配宽度的时候不会减掉左右padding的部分,相当于忽略了padding效果*/
		</style>
	</head>

	<body>
		<div class="box">
			<div class="item">column 1</div>
			<div class="item">column 2</div>
			<div class="item">column 3</div>
		</div>
	</body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 布局自适应一侧定宽

赞 (2)
分享到:更多 ()

发表评论 0