4

私はCSSにそれほど精通していません。そして、主要な癖のすべてをまだ知りません。多分誰かが私を助けることができます。コードを示す画像、DIVの図、およびIEとChrome/FFでの外観の例を設定しました

ダイアグラム

誰かが私にこれを行うための適切な方法を教えてもらえますか？

フィドル： http： //jsfiddle.net/PhilippeVay/BuuuW/2/

IEでは正常に機能しますが、ChromeとFFでは、画像の1つがコンテナからエスケープされており、私が呼んでいる「コンテンツブロック」は、隣にあるはずの画像の下にあります。私の図ではcssはないと言っていますが、各コンポーネントにはcssクラスがあります。現在、それらの基本的なスタイル（パディング、テキストインデントなど）がいくつかあります。

ありがとうございました

4

2 に答える 2

1

clearfix hack for .cbContent（clearfix cssを含み、クラスを追加）を使用.clearfixして、左側の画像に合わせてボックスを展開します。

編集：また、同じdivに固定幅（つまり500px）とパディングを与えていないことを確認してください。これにより、ボックスモデルの解釈方法が原因で、ブラウザの動作が異なる場合があります。これに関する詳細とこれに対する優れた解決策については、Paul Irishのブログ投稿をここで読んでください：http： //paulirish.com/2012/box-sizing-border-box-ftw/

于 2012-08-28T21:34:41.393 に答える
1

コンテナに追加overflow: hiddenすると、左側の部分が右側の画像の下に続くのを防ぐことができます。

.cb {
    overflow: hidden;
}

これにより、新しいブロックフォーマットコンテキストが作成されますが、他の人が私よりもうまくやっているので、説明しません:) http://colinaarts.com/articles/the-magic-of-overflow-hidden/

編集：person.jpgが左側の親から外れているのを見ませんでした：clearfixメソッドについては他の回答を参照してください:)

于 2012-08-28T21:36:18.757 に答える