1

Web ページに写真のブロックを作成しようとしています (幅が設定されているため、コードのその部分をコピーしませんでした)。以下の JSFiddle リンクにコードを入れました。

http://jsfiddle.net/T2qHR/12/

グラフィックエディタでやろうとしていることを再現します。ここをクリックしてご覧ください: http://www.flickr.com/photos/adpartners/6630840127/in/photostream

css/html で何が間違っているのかわかりません。div タグの 1 つで float left を使用したため、すべてが左に固定されています。背景を中央に配置して、その上に画像を配置します。3枚の写真、2枚の写真、1枚の写真、2枚の写真のように。それらはすべて、その部分のリンクをすでに取得している youtube ビデオにリンクします。

どんな助けでも大歓迎です。p、div、table、ol/li タグを使用して、このコードの 10 ～ 20 の異なるバージョンを実行しましたが
、正直なところ、今はどれを使用すればよいかわかりません。

私が間違っていることを見つけたら、私に記入してください。私はコードを失っています!

あなたが提供するかもしれないどんな助けにも感謝します、R

4

1 に答える 1

0

代わりにdisplay: inline-blockandを使用してください。text-align: center

div.floatingPic { display: inline-block; padding: 12px; }

div.containerVid { border: 2px solid #99cc99;
                   background-color: #000000;
                   padding: 45px;
                   height: 890px;
                   border-radius: 10px;
                   margin-bottom: 25px;
                   text-align: center; }

が十分に広い限り.containerVid、画像は行に収まらなくなるまで積み重ねられます。強制的に早く中断したい場合は、単純に a を追加<br />します (これまで行ってきたように)。

フィドル: http://jsfiddle.net/T2qHR/20/

于 2012-01-03T23:09:28.497 に答える