求教，如何用jQuery或其他方法实现两个div的间距设置。_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
求教，如何用jQuery或其他方法实现两个div的间距设置。
是这样的，我是用到瀑布流布局。
共有4列，每列1个div。每个div设置margin-right:20px，但这样页面最右边的div就多了个右边距。
如果不是瀑布流布局就就很简单了，关键是瀑布流布局，每个div的位置是不一定的，我无法用margin-right:0对某个div定义。...
设置两个div之间的间距，方法有很多种，常见的方法如下：1、对样式的设置来完成间距设置：
&div style=&margin-bottom:___&&&/div&&div&&/div&
&div&&/div&&div style=&margin-top:___&&&/div&2、在css中设置div间距，如：
&div id=&div1&&&/div&&div id=&div2&&&/div&
&style type=&text/stylesheet&&
#div1{margin-bottom:___}
#div2{margin-top:___}
&/style&3、使用JavaScript或者jQuery设置，如：&div id=&div1&&&/div&&div id=&div2&&&/div&&script type=&text/javascript&&
$(&#div1&).attr(&style&,&margin-bottom:___px&);
$(&#div2&).css(&margin-top&,&___px&);&/script&
采纳率：76%
来自团队：
&最小的值对应的指针h[minKey] += li_H+/li&ul&style&&ul id=&lxf-box&a&
&h3&图片标题&/
&lt，这里使用源生的offsetWidth函数，不适用jQuery的width()函数是因为它不能取得实际宽度，例如元素内有pandding就不行了）function liuxiaofan(){//,minKey * li_W);
&h3&gt.7s ease-out .1s }&/定义成函数便于调用var h=[];取得数组中的最小值.eq(i);li&//图片标题&/&#47.css(&/h3&
&//先得到高度最小的Li;a &
&,min_H+margin);//li&
&li&&a &&img //有多少个li就循环多少次li_H = li[i];);a&
&h3&图片标题&////这里设置间距var li=$(&quot: 0; }h3 { padding-li&; }/li&li&i &,i * li_W);/body, ul, li, h3 { margin.把接下来的li放到那个li的下面*&#47.7s ease-out .1s;text/css&a&
&h3&图片标题&/&/加上新高度后更新高度值li.eq(i).css(&top&&lt：&/h3&
&&#47.css(&&a &a&
&h3&图片标题&/取区块的实际宽度（包含间距;,0);图片标题&&gt:/a&img /&&&#47.offsetH/&lt.i++) {/
&/把每个li放到数组里面li.eq(i).css(&top&&lt，所以小于n就是第一行了h[i]=li_H;/h3&a &li_W|0;&#47，区块中高度值最小的那个minKey = getarraykey(h;&&lt,h) ;h3&*瀑布流布局样式*/li&gt.第一行的top都为0 3.计算高度值最小的值是哪个li 4;/第i个li的左坐标就是i*li的宽度}else{min_H =Math.min.apply(null，这样你就不用去设置margin-right了。另外;h3& -moz-transition: all .7s ease- -o-// }#lxf-box li { position: background: # border: solid 1px # text-align:/li&
&li&&a &&img /记录区块高度的数组var n = document:/*原理：1.把所有的li的高度值放到数组里面
2;/这里是区块名称varli_W = li[0].eq(i);/获取每个li的高度if(i & n) {//&& /& display: ////a&gt: 0; list-style: font: bold 12px &第一行的Li的top值为0li: all : 0 }/*css3动画*/h3&n是一行最多的var margin = 10;a &gt: 0
&图片标题&script&/li&&//窗口的宽度除以区块宽度就是一行能放几个区块for(var i = 0: 10#lxf-box { position:/h3&
&&#47，在运行我贴上的代码的时候请应用jquery类库&style type=&quot，然后把接下来的li放到它的下面left&quot, min_H);&/a&img /&&&#47.offsetWidth/
&img /&&/h3&
&img /&&//li&
&li&&a &&img &#47.7s ease-out .1s:
&&li { -webkit-&lt: 0; padding.offsetWidth+ //li&h3&微软雅黑&
&left&li&编号：&+i+&&lt: 8 }img { width: 200px一下是相关代码，JS中定义的变量margin就是你所说的每个div的间距;，高度;第i个li的左坐标就是i*li的宽度}$(&h3&).eq(i).text(&+li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面}}/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */function getarraykey(s, v) {for(k in s) {if(s[k] == v) {}}}/*这里一定要用onload，因为图片不加载完就不知道高度值*/window.onload = function() {liuxiaofan();};/*浏览器窗口改变时也运行函数*/window.onresize = function() {liuxiaofan();};&/script&&/body&&/html&;
&lt.documentElement
本回答被网友采纳
你可以找就query插件进行布局管理
4列是固定列数是吗？不会多也不会少？
是的，4列是固定数。
那就好办了啊你单独设置第四例div右边距为0就行了啊你设置四列高度自适应的列然后把瀑布流加入到这四列里就行了啊明白那意思不
请问你的瀑布流是如何实现的?如果每个div都是绝对定位的话,不需要考虑 margin-right.如果是固定列的位置,往下排div的话, 设置列的margin-right就行了啊.
我的瀑布流是用jQuery+Masonry插件。 我没有设置固定的4列，而是将div放在一个980px的大盒子里，然后里面独立的div就按照既定规则自己排列，因为有980px的大盒子，所以正好能放下4个div。
把div的margin去掉调用 Masonry 的时候添加上这个参数 gutterWidth , 是用来控制 列之间 距离的
$('#container').masonry({
itemSelector: '.box',
columnWidth: 100,
gutterWidth: 40
设置它们的父容器的margin-right:-20px可以不,互相抵消掉
测试过了，这个一用更乱套了，谢谢你。
其他3条回答
为您推荐：
其他类似问题
jquery的相关知识
换一换
回答问题，赢新手礼包DXP2004的所有的快捷键 ,比如层之间的切换_百度知道
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。
DXP2004的所有的快捷键 ,比如层之间的切换
我有更好的答案
多边形线时激活开始&#47，上下翻转X
放置元件时：鼠标左击
选择鼠标位置的文档鼠标双击
编辑鼠标位置的文档鼠标右击
显示相关的弹出菜单Ctrl+F4
关闭当前文档Ctrl+Tab
循环切换所打开的文档Alt+F4
关闭设计浏览器DXP2你把以下保存到文本文档，方便以后查询1、设计浏览器快捷键、PCB快捷键：Shift+R
切换三种布线模式Shift+E
打开或关闭电气网格Ctrl+G
弹出捕获网格对话框G
弹出捕获网格菜单N
移动元件时隐藏网状线L
镜像元件到另一布局层退格键
在布铜线时删除最后一个拐角Shift+空格键
在布铜线时切换拐角模式空格键
布铜线时改变开始/结束模式Shift+S
切换打开/关闭单层显示模式O+D+D+Enter
选择草图显示模式O+D+F+Enter
选择正常显示模式O+D
显示/隐藏Prefences对话框L
显示Board Layers对话框Ctrl+H
选择连接铜线Ctrl+Shift+Left-Click
切换到下一层（数字键盘）-
切换到上一层（数字键盘）*
下一布线层（数字键盘）M+V
移动分割平面层顶点Alt
避开障碍物和忽略障碍物之间切换Ctrl
布线时临时不显示电气网格Ctrl+M或R-M
测量距离Shift+空格键
顺时针旋转移动的对象空格键
逆时针旋转移动的对象Q
米制和英制之间的单位切换E-J-O
跳转到当前原点E-J-A
跳转到绝对原点：Alt
在水平和垂直线上限制对象移动
循环切换捕捉网格设置空格键(Spacebar)
放置对象时旋转90度空格键(Spacebar)
放置电线、总线;结束模式Shift+空格键(Spacebar)
放置电线、总线，左右翻转Shift+↑↓←→
箭头方向以十个网格为增量，移动光标↑↓←→
箭头方向以一个网格为增量、总线、多边形线时删除最后一个拐角点击并按住鼠标左键+Delete
删除所选中线的拐角点击并按住鼠标左键+Insert
在选中的线处增加拐角Ctrl+点击并拖动鼠标左键
拖动选中的对象4、原理图和PCB通用快捷键：Shift
当自动平移时、多边形线时切换放置模式退格建(Backspace)
放置电线，移动光标SpaceBar
放弃屏幕刷新Esc
退出当前命令End
屏幕刷新Home
以光标为中心刷新屏幕PageDown,Ctrl+鼠标滚轮
以光标为中心缩小画面PageUp, Ctrl+鼠标滚轮
以光标为中心防大画面鼠标滚轮
上下移动画面Shift+鼠标滚轮
左右移动画面Ctrl+Z
撤销上一次操作Ctrl+Y
重复上一次操作Ctrl+A
选择全部Ctrl+S
保存当前文档Ctrl+C
复制Ctrl+X
剪切Ctrl+V
粘贴Ctrl+R
复制并重复粘贴选中的对象Delete
显示整个文档V+F
显示所有对象X+A
取消所有选中的对象单击并按住鼠标右键
显示滑动小手并移动画面点击鼠标左键
选择对象点击鼠标右键
显示弹出菜单，或取消当前命令右击鼠标并选择Find Similar
选择相同对象点击鼠标左键并按住拖动
选择区域内部对象点击并按住鼠标左键
选择光标所在的对象并移动双击鼠标左键
编辑对象Shift+点击鼠标左键
选择或取消选择TAB
编辑正在放置对象的属性Shift+C
清除当前过滤的对象Shift+F
可选择与之相同的对象Y
弹出快速查询菜单F11
打开或关闭Inspector面板F12
打开或关闭List面板3、原理图快捷键，快速平移Y
放置元件时
采纳率：37%
DXP2004比99SE好用多了！很多的快捷键都有的额！
为您推荐：
其他类似问题
dxp2004的相关知识
换一换
回答问题，赢新手礼包欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 如何让多个div盒子并排同行div横向排列显示呢？
我们先设置3个盒子对象，什么都不设置看看效果。代码如下：
三个div盒子均独占一行显示
div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为设置。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法。
一、使用并排显示
我们对div设置一个属性即可解决不并排显示，只要你的并排div盒子总宽度小于或等于最外层盒子宽度即可实现多个div对象并排显示。
加float浮动实现多个div并排显示
这里我们对div通设一个浮动，当然实际使用时候，要通排显示div对象的加入css类，我们就对要同行显示设置浮动。避免其它不需要设置的也被加入浮动样式。
二、使用css display同行显示
我们加入即可解决实现同行并排显示div盒子对象。
未设置display样式效果截图：
未并排显示div盒子截图
对div标签设置div{ display:inline}样式，解决后截图：
使用display样式实现同行并排显示div盒子
为了区别其他不需要设置横向排列显示div盒子对象，我们对相邻需要同排显示的div盒子统一加粗css类，为&.div-inline&。
.div-inline{&display:inline}&
&class=&div-inline&第一个div盒子&&class=&div-inline&第二个盒子&&class=&div-inline&第三个盒子&
效果截图：
使用display实现并排显示
无论是float浮动还是display实现并排显示，要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。
扩展阅读：
4、-如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 09:54
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台以下试题来自：
判断题在Dreamweaver里，层与表格之间是可以转换的，但要求层之间不能有重叠多层的情况。 对
为您推荐的考试题库
您可能感兴趣的试卷
你可能感兴趣的试题
1.判断题 错2.判断题 错3.判断题 对4.判断题 对5.判断题 错