Question

我试图在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会进入下一行，创建一个新的'row'。如何在一行div下面插入跨越整页宽度的div。

要向您展示我想要达到的目标，请访问Google上的此链接：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％。

要在悬停的div之后插入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等中插入After。

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/

如何在行尾定位div？

3 个答案: