2011-11-16 19 views
0

マイページはhereです。単純なcss要素の配置

商品画像の下に黒いビデオボックスがあります。私はそれが左に浮かぶので、小さな製品の写真はビデオボックスとインラインです。それをすることはできません。私は奇妙なポジショニングがあるかどうかを調べるためにCSSを調べましたが、何も見つかりませんでした。

私がFacebookbuttonの上にビデオボックスを移動して浮動させると、すべてが期待通りに機能します - Facebookボタンが上に移動します。

+0

...関連ビットは12深いネストされています。あなたはjsFiddleのデモを投稿できますか?また、私は 'float'がビデオボタンまたはそのネストされた' div'sのものに適用されているとは思わないので、どのようにそれが左に浮かぶと思いますか分かりません。 – Sparky

答えて

0

、およびビデオDIV「幅:70ピクセル」の幅を設定する例を。 image here

マージンとパディングは、あなたが正しく行で縦にあなたのビデオボックスを中央に役立つだろうが、あなたの大きな問題は、

はそれが役に立てば幸い、これらのCSSルールで解決されています。詳細はスクリーンショットを見てみましょう! ! :-)

て掘ることがたくさんあります

check it here

+0

何が私のために働くのは、vido-colorboxをフロートさせて、提案したように2番目のdivのインラインブロックを設定することでした。なぜそれが浮動小数点を使用してのみ動作していなかったかを教えてください:最初のdivに左?私はそれを私の恋人にして数回やっていました。それは2番目のdivにテーブルなどが含まれているからですか?ありがとうございました – user1031742

+0

display:blockはdivを
のように振る舞います。つまり、次のコンテンツがすぐ下にレンダリングされることを意味します。そのため、display:inline-blockを使用する必要があります。 (インラインで偽物
を削除し、ブロックはdivのように動作し、スパンとは違う)。ビデオボックスの幅を設定すると、もしあなたがいなければ100%に拡大されるので、2番目の行にはスペースが残らないので便利です。世話をする! –

+0

素晴らしい、説明をありがとう – user1031742

1

view-contentクラスに追加します。

あなたが「表示:インラインブロック」に、両方の項目のコンテナ(divを)設定する必要が
.view-content { 
    float: left; 
}