如何在行结束的div的目标？(How to target div at the end of the

我试图插入一个盒子的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的一排下面一格。

为了向你展示我要实现的，请在谷歌这个链接是什么： http://bit.ly/1329rDn

然后你会看到，如果你点击任何图像，它会打开一个新的图像更大的插图中的DIV行，这怎么实现的呢？ 我该怎么做？

Answer 1:

我想在你的调查，这可以帮助你：

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元素（在我的例子徘徊）。 它有100％的宽度占据整个水平空间。

要插入expander悬停格后，我用这个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

Answer 2:

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

var divs = document.getElementsByTagName('div');
divs[divs.length-1].style.border = '1px solid red';

Answer 3:

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

文章来源: How to target div at the end of the row?