如何在行末查找div？

我想插入一個盒子條之間的div行之間，我怎麼可以目標每行的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。

要告訴你我想要什麼來實現，請訪問谷歌此鏈接：http://bit.ly/1329rDn

然後你會看到，如果你點擊任何圖像，它會打開一個新的圖像更大的插圖中的DIV行，怎麼回事這實現了嗎？我該怎麼辦？

來源

2013-03-17 Halcyon991

你用明確的財產？ – kirugan 2013-03-17 19:35:06

您將需要計算div的寬度，並且當它們的累積寬度大於容器時，您已經開始了一個新行，因此您可以在該行的最後一行之後插入「display」。當窗口調整大小時，這將需要重新計算。 – 2013-03-17 19:35:41

@thesystem是的，這就是我想要做的（聽起來很棒）。關於如何嘗試它的任何想法？ – Halcyon991 2013-03-17 19:37:10

我覺得在任何其他的div這可以幫助你在你的調查：

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％的寬度佔據整個水平空間。

要我用這個JavaScript（內環路for）懸停格後插入expander：

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

可以insertAfter jQuery中，等

來源

2013-03-17 19:42:05 dfsq

這真的很好！儘管有一個問題（我正在使用jQuery，所以可以隨意使用）...假設'expander'已經創建，但是設置爲none，並且點擊時，我想使用'fadeIn'方法顯示擴展器。你將如何轉換你的函數來移動它的點擊功能而不是懸停？ – Halcyon991 2013-03-17 19:56:01

使用jQuery更簡單：http://jsfiddle.net/5Sn94/22/ – dfsq 2013-03-17 20:03:35

喜歡這個，完美。對我來說也是一次很好的學習體驗，並且非常適合CSS。謝謝！ – Halcyon991 2013-03-17 20:15:24

-1

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

來源

2013-03-17 19:32:18 MattDiamant

這個目標是最後一個div，我想這樣做，但是在每一行上，所以離網頁右側最近的div也會被突出顯示爲紅色 – Halcyon991 2013-03-17 19:33:32

：http://jsfiddle.net/5Sn94/6/ – MattDiamant 2013-03-17 19:39:45

我可以改變這個，所以它不使用jQuery，如果你想，哈哈。 – MattDiamant 2013-03-17 19:55:52

您可以使用document.getElementsByTagName但它只會工作，如果你沒有在網頁http://jsfiddle.net/5Sn94/2/

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

來源

2013-03-17 19:34:18 jcubic

感謝jcubic，但是我想實現的目標是在_row_結尾的div，而不是整個div列表，所以如果有5行div，結束每行的div將突出顯示爲紅色。 – Halcyon991 2013-03-17 19:35:52

@ Halcyon21你應該更新你的html。 – jcubic 2013-03-17 19:37:01

用什麼？ HTML不需要更新來實現我所期望的，Google已經使用div的行來完成它。 – Halcyon991 2013-03-17 19:38:10

如何在行末查找div？

回答

相關問題