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です。水平方向のスペース全体を占める 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

使用できますdocument.getElementsByTagNameが、ページに他の div がない場合にのみ機能しますhttp://jsfiddle.net/5Sn94/2/

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 に答える