使用JS将所有元素固定到div的顶部,但保持水平位置

时间:2011-05-12 13:22:01

标签: jquery css

我在固定宽度<li>内有一系列方形ul元素。当它们到达<ul>的边缘时,它们会落到一个新行上,因此有3行<li> s(想象一个由<li>元素组成的砖墙。)

我需要将所有这些固定到<ul>的顶部边缘,因此只有一行,所有这些行都在顶部。问题是如果我使用position: absolute; top:0;,水平位置就会丢失。

有没有办法用javascript这样做,以便保留水平位置,但它们固定在<ul>的顶部?它们都会重叠并堆叠在彼此之上并不重要

2 个答案:

答案 0 :(得分:1)

您必须让它们自然布局,然后将其样式更改为position:absolutetop:0left:(insert the value of each element's offsetLeft)

编辑:示例

var container = document.getElementById('hover-days');
var elements = container.getElementsByTagName('li');
var lefts = [];

// first read the values
for(var i = 0; i < elements.length; ++i) {
    lefts[i] = elements[i].offsetLeft;
}

// then set them
for(var i = 0; i < elements.length; ++i) {
    var el = elements[i];
    el.style.left = lefts[i] + 'px';
    el.style.top = '0px';
    el.style.position = 'absolute';
}

答案 1 :(得分:1)

如果您可以使用CSS3选择器,:nth-child()伪选择器可以帮助您(您有一个固定的宽度列表,所以我假设您将始终具有相同数量的li s连续)。

ul { width: 150px; height: 150px; position: relative; }

li { width: 50px; height: 50px; position: absolute; top: 0; left: 0; }

li:nth-child(3n-1) { left: 50px; }

li:nth-child(3n) { left: 100px; }

jsFiddle Demo

如果你需要一个jQuery解决方案,我写了这个小巧的函数:

$('li').css('left', function (index) {
    var $me=$(this),
        myWidth=$me.width(),
        myLeft=(index % 3)*myWidth;
    return myLeft;
});

此代码假定li已设置为position: absolute; top: 0;ul设置为position: relative,所有宽度和高度均使用CSS设置。

2nd jsFiddle Demo

阅读您的评论,只需使用#hover-days ul li代替li作为jQuery选择器。