css - 在 float LI 的行之间放置一个元素

Question

使用 CSS，有什么方法可以指定元素位于列表中 float 列表项的行之间。

HTML:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

<div class="in-between">  I want this between the second and third row, even if the window is resized. </div>

CSS:

*, *:before, *:after {  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
ul{margin:0px;padding:0px;}
li{width:100px;height:100px;float:left;margin:10px;background:green;list-style-type:none;}
.in-between{background:red;height:100px;clear:both;}

你可以在这个 fiddle 中看到一个例子。 http://jsfiddle.net/rqCHk/3/

无论浏览器的宽度如何，我都希望底部的红框位于第一行和第二行之间。

如果使用 CSS 无法做到这一点，那么下一个最好的办法就是在不担心宽度变化的情况下执行此操作。如果有一种方法可以在不使用 JavaScript 的情况下指定它位于第一行下方，那就太好了。

谢谢!

Answer 1

好吧，我把它作为一个小小的思考练习来处理。正如其他人所说，这不是纯 CSS 的工作，但有一点 jQuery hackery，这是可能的。我编写了一个 jQuery 函数来实现它，因此您可以在这里看到它:

http://jsfiddle.net/rqCHk/7/

这是 jQuery :

//Put all the original LIs in an array. 
var oldlis = [];
$("ul.old li").each(function() { oldlis.push($(this)) });

function insertRow() {
    // Count the number of LIs per row
    wsize = $(window).width();
    lisize = $("ul.old li").outerWidth(true);

    liperrow = Math.floor(wsize/lisize);
    rownum = liperrow * 2;

    $.each(oldlis, function(k,v) {
        if( k< rownum) {
            $("ul.new").append(v);
        } else {
            $("ul.old").append(v);
        }
    });
}




$(window).resize(function() { 
    insertRow();
});
insertRow();

还有你的新 HTML:

<ul class="new">
</ul>

<div class="in-between">  I want this between the second and third row, even if the window is resized. </div>

<ul class="old">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
</ul>