首页 > 其他 > 详细

div布局小技巧

时间:2015-05-07 08:41:21      阅读:277      评论:0      收藏:0      [点我收藏+]

多个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非常相似。

div布局小技巧

原文:http://www.cnblogs.com/JimmyBright/p/4483798.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!