div布局小技巧

[b]第一：[/b]

多个div整齐排列在外层div中，如图：



看到所有小的div的前后左右间隔都相等。假定已经制作好上述单元div控件。在外层大div中循环开始创建它们。

for (var i=0; i < cellSum; i++) {
var cell = new CellPhoto("2.jpg","影集套系"+id,interval,this.cellWidth,this.cellHeight
var divCell=cell.createNormalCell();
div.appendChild(divCell);
};

上面有interval，自然能计算出cellWidth,cellHeight,设置cell的marginTop也为interval.这样就能基本实现上述界面效果，但是如果很多行的话，会发现最下面一行会紧贴外层div的下边界，为了美观，我们需要最下面一行与下边界的间距也是interval，这是本文重点需要解决的问题。

很简单，找到小div中的最后一个，设置其marginBottom=interval,这样的话，外层div会检测到有元素需要更多的纵向空间，画布就会自动增加interval的高度。用单个元素的margin便控制了最后一行的整体效果，非常方便，和WPF中WrapPanel非常相似。

[b]第二：[/b]

元素定位的时候CSS文件必须添加position属性，一般是这样的：

#div0｛

　　position:absolute;

　　left:0px;

　　top:0px;

｝

有了left和top就可以定位一个dom，如果在此处想在有便宜，可以继续使用margin来调整，也可以继续使用left和top调整

#div0｛

　　position:absolute;

　　left:0px;

　　top:0px;

　　marginLeft:100px;

　　marginTop:100px;

｝

[b]第二：[/b]

任何一个div居中可以这样写：

假设该div宽度为w，高度为h

#div1{

　　position:relative;

　　left:50%;

　　top:50%;

　　marginLeft:-w/2.0+'px';

　　marginTop:-h/2.0+'px';

}