解决方法
您可以使用绝对和相对定位.
例如
<div id="container" class="Box"> <div class="Box top left"></div> <div class="Box top center"></div> <div class="Box top right"></div> <div class="Box middle left"></div> <div class="Box middle center"></div> <div class="Box middle right"></div> <div class="Box bottom left"></div> <div class="Box bottom center"></div> <div class="Box bottom right"></div> </div>
CSS
#container{
width:200px;
height:200px;
position:relative;
border:1px solid black;
}
.Box{
border:1px solid red;
position:absolute;
width:20px;
height:20px;
}
.top{top:0}
.middle{top:50%;margin-top:-10px;/*half of the .Box height*/}
.bottom{bottom:0}
.left{left:0;}
.center{left:50%;margin-left:-10px;/*half of the .Box width*/}
.right{right:0;}
演示在http://jsfiddle.net/gaby/MB4Fd/1/
(您可以通过更改顶部/左/右/底部值来调整您的偏好的实际位置)
