jquery - 为什么附加元素会删除元素之间的空间？

Question

我已经应用appendTo()了 jquery 函数，但我想知道为什么图像之间没有空间。您可以在演示中看到附加的图像正在消除间隙。

var m = $('#main');
m.find('img:lt(3)').clone().appendTo(m);

好的，我现在明白了。但是我怎样才能附加空间呢？

score 2 · Accepted Answer

因为你只克隆了images你line-break在每个中使用过的看到image所以这样cloning做只是为了images不line-breaks

如果你看到演示没有line-breaks那么你会看到space它们之间有你想给same space每个image然后使用padding:3px像，

img{
    width: 100px; 
    padding:3px;
}

更新了，你可以jquery不paading喜欢，

var m = $('#main');
var n=m.clone();
n.find(':gt(2)').remove();
$(n.html()).appendTo(m);

但我建议使用CSSif 没有必要jquery

score 2 · Accepted Answer

如果您想控制图像之间的间隙，请对图像应用边距或填充。

浏览器会在它们之间的 HTML 中有空格的两个图像之间放置一个间隙。当您以编程方式添加图像时，它们之间没有空格，因此没有间隙。

您甚至可以通过设置 font-size: 0 或消除 HTML 中的空白将现有空白缩小到零。

img {
    width: 100px;
    padding: 3px;
}

#main {
    font-size: 0;
}

这是所有图像之间等间距的演示：http: //jsfiddle.net/jfriend00/sHnS3/

score 0 · Accepted Answer

0

尝试添加浮动：左；在 img 类 css

于 2013-10-25T04:32:08.197 回答

score 0 · Accepted Answer

0

Jquery 克隆消除了 html 元素之间的空格/换行符。

于 2013-10-25T04:40:03.440 回答

4 回答 4