イメージの周りを包む

フォーク！私はしばらくこの問題を解決しようとしていましたが、結果はありませんでした。 css 'floats'や 'clears'の助けを借りて、あるいは別の良い方法で画像の周りに画像をラップすることは可能ですか？スクリーンショットをご覧ください。 - http://i27.fastpic.ru/big/2012/0204/41/540baedf99a08909593544ca4bb78241.png リンク先は - http://layot.prestatrend.com/ ありがとう！イメージの周りを包む

出典

2012-02-04 Anton

floatを使ってみてください：左 – jacktheripper

私はすでに行っていますが、空の領域はまだそこにあり、画像で満たされていませんか？ – Anton

あなたのマークアップとCSSコードを表示できますか。あなたの問題を解決するのに役立ちます。 – NewUser

3つの列があるように見えますが、これらは1つのDIVに折り返して、残りの部分に応じて（または残りの部分に応じて）浮動させることができます。これはイメージだけではなく、一般的にDOM-Elementsに関するものです。しかし、私は、行く方法はdivにそれらをラップし、そのように書式設定することだと言います。

出典

2012-02-04 19:43:26 EGOrecords

3列ではありません。 ..画像にCSSの浮動小数点があるかどうか分かりません：まだ空き領域がまだ画像でいっぱいになっていませんか？ float：XXXの場合は – Anton

と表示されることがあります。画像が他の画像よりも1pxだけ大きかった場合（またはブラウザがそのように考える）、画像を新しい行に描画しています。私は彼らのスタイルだけで画像を置くことは決してありません。なぜなら、時には少し難しく、divに配置して、特定の幅を強制することができるからです。 – EGOrecords

ブロックを手動で配置する（CSSの位置決め）か、jQuery Masonryのようなものを使用してブロックを配置します。これは、あなたが探していますが、これを試すことができるものであれば

出典

2012-02-04 19:48:08 spliter

答えがありがとう、唯一の方法は、jQuery Mansonryまたは他のスクリプトを使用することですが、純粋なCSSの方法はありませんか？ – Anton

これは私が言う最も簡単な方法です。欠点は、手動でCSSを配置するときと同じレベルの制御を持たず、時間を節約できることです。これを言っている厳密な設計仕様がない場合、またはそのイメージが正確にここに、どこにも存在しない場合は、jQuery Masonryに行きます。実用的かつ将来的なメンテナンスの理由から。 – spliter

ない100％を確認してください。

#center_column .products_block ul li { 
float: left; 
margin-top: 0; 
width: 234px !important; 
margin-right: 1px; 
margin-bottom: 1px; 
padding: 0; 
}

注意するスタイルは、次のとおりです。幅：！234px重要;

width属性に重要なものを追加したところ、画像間のギャップがなくなりました。これが何らかの形で役立つことを願っています。

出典

2012-02-04 21:30:57 Josh

答えて

関連する問題