如果在一个固定宽度的div里布局,使用{float:left;}、{margin: 0 60px 60px 0;},右侧会不靠边
今天我们说一个比较传统的方法,在布局里边再套一个div,让这个div宽度再加上60,并且给他position:relative;这样就可以了
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站模板</title>
<style type="text/css">
body {
}
.mc{margin:0 auto;}
.index{width:1200px;overflow:hidden;}
.img{
background-color: #F90;
height: 260px;
width: 360px;
margin: 0 60px 60px 0;
}
.l{ float:left;}
.bg{background-color: #666;}
.w1260{width:1260px;
position:relative;}
</style>
</head>
<body>
<div class="index mc bg">
<div class="w1260">
<div class="img l"></div>
<div class="img l"></div>
<div class="img l"></div>
<div class="img l"></div>
<div class="img l"></div>
<div class="img l"></div>
<div class="img l"></div>
<div class="img l"></div>
<div class="img l"></div>
</div></div>
</body>
</html>
另外这情况可以使用css3里边的选择器来解决