Question

使用CSS，我是否可以指定元素位于列表中浮动列表项的行之间。

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

你可以在这个小提琴中看到一个例子。 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>

Answer 2

我不确定它是否可以使用花车。假设.in-between的高度是固定的，我可以想象的唯一解决方案是使用第一行高度增加的内联块和绝对定位（see fiddle）：

li{ /* other styles... */ display:inline-block; vertical-align:top; }
ul:first-line { line-height:220px; }
.in-between{ /* other styles... */ position:absolute; top:120px;}

在浮动LI的行之间定位元素

2 个答案: