html - Kickstarter 喜欢主页中的堆叠图像背景

Question

我想模仿 kickstarter.com 中使用的堆叠图像。我的问题是图像没有在屏幕上溢出。箭头指向要用图像填充的剩余空间。

这是图片 http://postimage.org/image/9we1jinkz/

HTML:

 <div id="projectGrid">
    <div class="project"><a href="thumbLink"><img src="img/p1.png" /></a></div>
    <div class="project"><a href="thumbLink"><img src="img/p2.png" /></a></div>
 </div>

CSS:

.project {float:left;overflow:hidden;}
 #projectGrid {

background: none repeat scroll 0 0 #222222;
overflow: hidden;
position: absolute;
z-index: 6;
}

Answer 1

您需要向 projectGrid 添加一个外部容器，它将占用屏幕总宽度的 80%，然后您的其余内容将其设置为较小的宽度。这是非常基本的 CSS 布局。显然你从 kickstarter.com 网站复制粘贴了一些 html 和一些 CSS。我强烈建议你在尝试实现像这样的复杂布局之前研究 CSS 的工作原理。 http://tinkerbin.com/fVhY1DHr