1

使用 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 指定它位于第一行下方，那就太好了。

谢谢！

4

2 回答 2

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>
于 2013-07-30T16:05:06.120 回答
0

我不确定浮动是否可行。假设高度.in-between是固定的，我能想象的唯一解决方案是使用增加第一行高度和绝对定位的内联块（参见小提琴）：

li{ /* other styles... */ display:inline-block; vertical-align:top; }
ul:first-line { line-height:220px; }
.in-between{ /* other styles... */ position:absolute; top:120px;}
于 2013-07-30T15:29:07.567 回答