在inline-block包装行中添加div [英] Add a div below inline-block wrapped row

问题描述

我有一个内联块元素的列表，包装形成几行。我想在行之间显示一个div元素，具体取决于特定元素的位置。例如，前几行编号为：

如果我想定位第三个元素并显示一个全长元素（包含块的div的100％）， ：

全长div的位置对于任何块1-5都是相同的。或者，如果定位了另一个块，例如7或8，则其将如下所示：

请注意行是向下移动。我理解如何使用块级元素，但不是在行之间的包装的inline-block元素。浏览器窗口宽度更改时，每个编号块将打开的行将更改，并且全长div将知道哪个行位于下面。

怎么会有人把div放在特定的元素行下面？有可能与某种相对或绝对位置与CSS？当块被窗口宽度更改重新排序时，行位置是否会动态改变？

UPDATE：
这里是 codepen ，它有块和插入的div。 div的样式是绝对定位的，并且可以通过将其插入到所需的块元素标记之后移动到适当的位置，但是我仍然无法获得它下面的行以腾出空间和向下滑动。

解决方案

这里有一个不同的选择：

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

没有必要有横幅绝对定位。只需给它 display：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; 
} 
}）; 
 }）; 
 

EDIT ：将样式表更改为与您的样式表类似。

I have a list of inline-block elements that wrap to form several rows. I'd like to display a div element between on of the rows, depending on where a specific element is located. For example, the first few rows are numbered:

If I wanted to target the third element and display a full length element (100% of the div containing the blocks), then it would look like this:

The position of the full-length div would be the same for any of the blocks 1-5. Or, if another block was targeted, like 7 or 8, it would look like:

Notice how the rows are "shifted down". I understand how to do this with block-level elements, but not in between rows of wrapped inline-block elements. The rows that each of the numbered blocks would be on would change as the browser window width changes, and the full-length div would "know" which row to be positioned beneath.

How would someone go about placing the div below that particular row of elements? Is it possible with some kind of relative or absolute position with CSS? Could the row position change dynamically as the blocks are reordered with window width changes?

UPDATE: Here is a codepen that has the blocks and the inserted div. The div is styled to be absolutely positioned, and can be moved to the appropriate position by inserting it after the desired block element tag, but I still can't get the row beneath it to make room and slide down.

解决方案

Here's a different alternative:

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

There is no need to have the "banner" be absolutely positioned. Just give it display:inline-block; like everything else, and calculate which block it needs to follow with the offset method in jQuery.

The key is in this code:

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;
        }
    });
});

EDIT: Changed the stylesheet to look like yours.

这篇关于在inline-block包装行中添加div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！