html和css：左浮动、居中、右浮动

淘宝首页部分样式如上，很明显布局为左、中、右。实现时，一个div包含3个子div，子div1左浮动，子div2设置为margin:0 auto，子div3设置为右浮动。注意创建时的顺序，居中的div最后创建。

<div id="content">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
</div>

样式表中，主要设置是div.left左浮动，div.right右浮动，div.center不设置浮动而设置margin:0 auto;效果如下

完整实例代码

<!DOCTYPE html>
<html>
<head>
	<title>样式</title>
</head>
<style type="text/css">
	*{
		padding: 0px;margin: 0px;
	}
	#content{
		position: relative;
		width: 100%;
		height: 200px;
		background-color: gray;
		padding: 40px 0px 20px 0;
	}
	#content .left{
		float: left;
		margin-left: 100px;
		width: 200px;
		height: 120px;
		background-color: red;
	}
	#content .right{
		float: right;
		margin-right: 100px;
		width: 200px;
		height: 120px;
		background-color: red;		
	}
	#content .center{
		margin: 0 auto;
		width: 500px;
		height: 120px;
		background-color: red;
	}
</style>
<body>
<div id="content">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
</div>
</body>
</html>

 

posted @ 2020-02-11 19:30  昨夜昙花  阅读(68)  评论(0)    收藏  举报