div布局小技巧

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

时间: 2024-08-10 00:04:41

div布局小技巧的相关文章

第八十四节,css布局小技巧

css布局小技巧 图片鼠标放上去遮罩效果,显示文字 当鼠标放上去时 /*最外层div*/ .a{ width: 384px; height: 240px; background-color: #ff4e37; position: relative; } /*插入图片的div*/ .b{ width: 384px; height: 240px; background-color: #ff4e37; overflow: hidden; } /*遮罩层div*/ .c{ width: 384px; h

box-sizing布局小技巧

<!-- box-sizing边框不一致问题:加div设置margin为负数 --> <div> <div style="margin-bottom:-1px;margin-right:-1px"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li

IFE学习笔记&lt;1&gt;之CSS布局小技巧

#main{ max-width:600px; margin:0 auto; } 用max-width替代width,可以使屏幕比600px窄时自动调整内容宽度,而不是出现滚轮.所有主流浏览器包括IE7都支持. *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; } 避免padding和border-width将元素撑宽.免去以往的数学计算,使width一样的元素一样宽.支持IE

css和HTML布局小技巧

一:水平居中 1. 如下所示,让child在parent中水平居中 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .parent{ width:300px; height:200px; border:1px solid #000; text-align: c

js小技巧: 给div绑定keydown事件

要想给一个元素绑定keydown事件我们经常这样: $('#some_thing').keydown(function(event){ ...... }) 但是当你尝试给div元素绑定时会发现不起作用, 解决办法是给这个div添加一个tabindex的属性: $('#some_div').attr('tabindex', 1).keydown(function(event){ ...... }) js小技巧: 给div绑定keydown事件

移动端样式小技巧

平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的.以下总结了一些常见坑和一些小技巧,希望对看官有所帮助! 本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比. 一.line-height line-height经常用于文字居中,当然也有小伙伴会用上下padding去写.but!不管你用padding还是line-height,不同手机显示效果还是-不一样. 一般会这样写 .demo{ height:

2天驾驭DIV+CSS (技巧篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练

css的小技巧

前几天看到<css揭秘>这本书,第一感觉是 css怎么能出这么厚的一本书,不过 细细一想,用好css真的可以实现很多想要的效果,节省很多js代码. 总结几个css的小技巧: 1,将所有元素垂直居中 1 html, body { 2 height: 100%; 3 margin: 0; 4 } 5 6 body { 7 -webkit-align-items: center; 8 -ms-flex-align: center; 9 align-items: center; 10 display:

备:移动端开发资源和小技巧

(在github上看到的,转摘而来,如果有版权问题请联系我[email protected]) mobileTech A useful tools or tips list for mobile web application developing 这个项目收集移动端开发所需要的一些资源与小技巧 移动端统计 (from BiosSun) 可基于下方所列出的统计数据来决定您要兼容的设备及浏览器. 百度移动统计 友盟指数 CNZZ 桌面及移动端浏览器统计 全球移动端浏览器统计 工具类网站 HTML5