一个常见的布局

其他

一个常见的布局

如果在一个固定宽度的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里边的选择器来解决

也许您对下面的内容还感兴趣: