4

我正在尝试在 div 行之间插入一个框条，如何定位每行 div 的末尾？

这是 div 的 JSFiddle：http: //jsfiddle.net/5Sn94

这是代码：

<div>
    <img src="//placehold.it/50x50">
</div>
<div>
    <img src="//placehold.it/50x50">
</div>
<div>
   <img src="//placehold.it/50x50">
</div>

一段时间后，div 将进入下一行，创建一个新的“行”。如何在一行 div 下方插入一个跨越整个页面宽度的 div。

为了向您展示我想要实现的目标，请访问 Google 上的此链接：http: //bit.ly/1329rDn

然后你会看到如果你点击任何图像，它会在 div 行之间打开更大的新图像，这是如何实现的？我该怎么做呢？

4

3 回答 3

2

我认为这可以帮助您进行调查：

div {
    display: inline-block; // <-- use display: inline-block instead of float: left
    margin: 0 15px 0 0;
    cursor: pointer;
}
.expander {
    background: coral;
    height: 100px;
    width: 100%;
    margin-bottom: 6px;
    float: left; // <-- this float makes the trick
}

http://jsfiddle.net/5Sn94/14/

.expander是一个 div，需要在 target（在我的示例中悬停）元素之后插入。它有 100% 的宽度来占据整个水平空间。

expander要在悬停的 div 之后插入，我使用了这个 javascript（内部for循环）：

div[i].onmouseover = function() {
    d.innerHTML = 'Details about div #' + this.dataset.id;
    this.parentNode.insertBefore(d, this.nextSibling).style.display = 'block';
}

您可以在 jQuery 等中 insertAfter。

于 2013-03-17T19:42:05.683 回答
0

您可以使用，但只有在页面http://jsfiddle.net/5Sn94/2/document.getElementsByTagName上没有任何其他 div 时它才会起作用

var divs = document.getElementsByTagName('div');
divs[divs.length-1].style.border = '1px solid red';
于 2013-03-17T19:34:18.050 回答
-1

使用 jQuery，您可以使用last-child选择器：http: //jsfiddle.net/5Sn94/1/

于 2013-03-17T19:32:18.513 回答