不一样的布局方式 - 从中间到两边

最新推荐文章于 2024-09-12 19:13:21 发布

huihuicms

最新推荐文章于 2024-09-12 19:13:21 发布

阅读量385

点赞数

分类专栏： div+css 文章标签：布局 html css 前端淘宝

本文链接：https://blog.csdn.net/huihuicms/article/details/38086065

版权

div+css 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

今天同事搞淘宝店，问我装修店铺，我想我这个虽然不是专业前端，至少对DIV+CSS还是了如指掌。

没想到打开页面一看，哎呀，这布局咋那么怪了，淘宝页面固定宽度是950px；也就是说所有页面内容都被束缚在950宽里面，但是同事的图可是1200px宽啊，无奈分析一番，想到以下布局方式

实现代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
	<style>
	
	#main{width:950px;margin:0 auto;height:100%;font-size:14px;}
	.header{background: #00ff00;}	
	.content{width:1200px;left:-125px;position:relative;background:#ff0000;}
	.footer{background: #00ff00;}
	</style>
	<div id="main">

	<div class="header">
		这个是正常排版下的信息 宽度为950px;
	</div>

	<div class="content">
		这个是宽1200px； left = -（1200-950)/2 = -125px;
	</div>

	<div class="footer">
		这个是正常排版下的信息 宽度为950px;
	</div>
	</div>

</body>
</html>

但是又有一个问题，我想content的宽度是满屏，就是相对于body是100% 又怎么办了？