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布局。显然你复制粘贴了一些html和一些来自kickstarter.com网站的CSS。我强烈建议你在尝试实现像这样的复杂布局之前研究CSS的工作原理。 http://tinkerbin.com/fVhY1DHr

Kickstarter喜欢在主页的堆积的图象背景

1 个答案: