5

ラップして複数の行を形成するインラインブロック要素のリストがあります。特定の要素がどこにあるかに応じて、行の間に div 要素を表示したいと思います。たとえば、最初の数行には番号が付けられています。

番号付きインラインブロック要素

3 番目の要素をターゲットにして、完全な長さの要素 (ブロックを含む div の 100%) を表示したい場合、次のようになります。

1列目と2列目の間

フルレングスの div の位置は、ブロック 1 ～ 5 のいずれでも同じです。または、7 や 8 などの別のブロックがターゲットにされた場合は、次のようになります。

二列目と三列目の間

行が「下にシフト」されていることに注意してください。ブロックレベルの要素でこれを行う方法は理解していますが、ラップされたインラインブロック要素の行間では理解していません。ブラウザ ウィンドウの幅が変化すると、番号付きの各ブロックが配置される行が変化し、完全な長さの div は、どの行が下に配置されるかを「認識」します。

その要素の特定の行の下に div を配置するにはどうすればよいでしょうか? CSSである種の相対位置または絶対位置を使用することは可能ですか? ウィンドウ幅の変更でブロックが並べ替えられると、行の位置が動的に変わる可能性はありますか?

更新:これは、ブロックと挿入された div を持つ codepenです。div は絶対に配置されるようにスタイル設定されており、目的のブロック要素タグの後に挿入することで適切な位置に移動できますが、その下の行を取得してスペースを空けて下にスライドさせることはできません。

4

2 に答える 2

5

別の方法を次に示します。

http://jsfiddle.net/SYJaj/7/

「バナー」を絶対に配置する必要はありません。他のすべてと同じように与えて、jQuerydisplay:inline-block;のメソッドでどのブロックに従う必要があるかを計算します。offset

キーは次のコードにあります。

function placeAfter($block) {
    $block.after($('#content'));
}

$('.wrapblock').click(function() {
    $('#content').css('display','inline-block');
    var top = $(this).offset().top;
    var $blocks = $(this).nextAll('.wrapblock');
    if ($blocks.length == 0) {
        placeAfter($(this));
        return false;
    }
    $blocks.each(function(i, j) {
        if($(this).offset().top != top) {
            placeAfter($(this).prev('.wrapblock'));
            return false;
        } else if ((i + 1) == $blocks.length) {
            placeAfter($(this));
            return false;
        }
    });
});

編集：スタイルシートをあなたのもののように変更しました。

于 2013-06-13T20:27:40.013 に答える