.a{width:300pxheight:300pxborder:1px solid #cccborder-right:0border-bottom:0}
.a div{width:99pxheight:99pxborder-right:1px solid #cccborder-bottom:1px solid #cccfloat:left}
</style>
<div class="a">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
这个应该不用position吧 这样显得好复杂
愚你所说，就是不用所谓的表格进行布局，让它回到它应该呆的地方，而所谓的div+css，只是统称，意为用相应的标签做它应该做的事，而不是乱套来套去…用css做外衣，实现内容与表现分离，而不是什么都乱堆在一起…以上…
<!DOCTYPE html><html>
<head>
<meta charset="GBK">
<title>test</title>
<style type="text/css">
*{
box-sizing: border-box
margin: 0
padding: 0
}
.container{
width: 90px
height: 90px
}
.item{
width: 30px
height: 30px
display: block
float: left
}
</style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
<script type="text/javascript">
var items = document.querySelectorAll('.item')
Array.prototype.slice.call(items, 0).forEach(function(item){
item.style.backgroundColor = '#'+(~~(Math.random()*(1<<24))).toString(16)
})
</script>
