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