jquery - Kickstarter.com "top"-bar 小图片 如何？

Question

我一直在尝试让我的 Kickstarter.com 顶栏炫酷小图片展示 - 但没有任何运气。

我已经尝试绝对定位元素，但无论我做什么，它都“不起作用”。

这是做了什么:

$('#holder .box').each(function(n){
   var pLeft = $(this).position().left;

   $(this).css({
     position: 'absolute',
     left: pLeft
   });
});

但随后所有元素都堆叠在一起。

顺便说一句:我知道这还不足以解决问题，但我需要帮助才能进一步解决这个问题。换句话说:我被卡住了!

Answer 1

当您看到一些很酷的东西并且想知道“他们是怎么做到的？” ...您的第一 react 应该是什么？

在 Firebug 中查看它。或者 Chrome 的开发工具。或者其他的东西。查看 HTML 结构是什么。查看应用于所有内容的 CSS 是什么。如果有一个 CSS 规则你不明白它是干什么的，就暂时关掉它或者弄乱它的值。使用 Firebug 的能力来实时操纵事物以发挥您的优势。

在这种情况下，其实并没有那么难。里面的元素只使用 float:left; 的图像。宽度:120px； height:90px - 有很多。包装器的宽度为 2640 像素并居中，因此它是 position:absolute;左边距:50%；宽度:2640px；左:1320px.