0

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;
}
4

1 に答える 1

0

projectGrid に外部コンテナを追加する必要があります。これは画面の全幅の 80% を占め、残りのコンテンツはそれをより小さな幅に設定します。これは非常に基本的な CSS レイアウトです。どうやら、kickstarter.com の Web サイトから HTML の一部と CSS の一部をコピーして貼り付けたようです。このような複雑なレイアウトを実現する前に、CSS のしくみを学習することを強くお勧めします。 http://tinkerbin.com/fVhY1DHr

于 2012-09-19T08:54:43.363 に答える