2012-03-30 11 views
5

私はfloat:leftの画像を持っていますが、その親をオーバーフローさせたいのですが、オーバーフローをカットします。ここでは、任意のoverflowルールなしで次のようになります。明示的な高さなしにoverflow:hiddenを使用することはできますか?

                                    enter image description here

ここに私が欲しいものです:

                                    enter image description here

ここでフィドルです:http://jsfiddle.net/ZA5Lm/

For some reason、それが明示的な高さのないoverflow:hiddenが成長している要素になりこ​​とを決定しました。

明示的な高さを設定しなくても、私は何とか後の効果を達成できますか?コンテンツの長さとブラウザの幅に基づいてこのdivを自動的にサイズ調整したいので、明示的な高さが機能しません。

+0

画像の幅は固定されていますか? – Jon

+2

'overflow:hidden'(または' visible'以外の値)は、ボックスに浮動小数点を含むブロック書式設定コンテキストを作成させます。フロートにフィットするようにボックスを展開することは、ボックスに 'height:auto'(明示的な高さなし)があるときの副作用の1つに過ぎません。 *なぜ*表示されていないオーバーフローがBFCを作成するのか、なぜ説明しているのかわかりません。 – BoltClock

+0

ビューポートのサイズを変更したときに行うべきことは何ですか(ここのように)(http://jsfiddle.net/YvEcK/)? – user123444555621

答えて

3

私の意見では、オーバーフローを使用して:寸法を設定せずに隠しては意味がありません。 http://jsfiddle.net/ZA5Lm/11/

イメージは絶対に配置されているテキストベースの外にそれを取って、:あなたはあなたのイメージは、あなたがこのソリューションを使用することができ一定の幅を持っている場合は、コンテナの高さとを指定しない場合フロー。しかし、 - これは醜いかもしれないことに気付いています。テキストをイメージから遠ざけるために左にパディングを指定する必要があります。

+0

ありがとう、私はあなたの解決策が受け入れられると思うし、試して見てみましょう。しかし、なぜあなたはオーバーフローと思われるのか不思議です:隠された_explicit_サイズなしでは隠されていません。親要素は、サイズが明示的に設定されているかどうかにかかわらず、明確なサイズを持つことに注意してください。 –

+0

親要素とは** div **を意味しますか?高さが指定されていない場合、高さはその内容に依存します。 divはテキストとともに拡大することも、画像の高さを無視することもできません。オーバーフローは境界があるときにのみ隠れることができるので、それは理にかなっていません。 –

+0

私はdivを意味します。オーバーフローなし:隠されています_does_はテキストとともに拡大し、画像の高さは無視します。この状況では、divには境界線があり、画像には境界線があるため、残っているのはそれらを交差させて画像を切り抜くことだけです。これは完全に明確に定義されていませんか? –

0

私はCSS-Tricksで投稿を見て、これについて話しました。でそれをチェックアウト行く - http://css-tricks.com/minimum-paragraph-widths/

それが役に立つかもしれません:)幸運

はまた、ちょうどあなたのコードを見て、私は、フロートを追加しました:右あなたのdivには、次のようになりますので、 -

div { 
border: 1px solid black; 
padding: 10px; 
float: right 
/*overflow: hidden;*/ 
} 

あなたが望むのかどうかわからないのですか?

+0

ちょうどそれを試みた - それは私が私の質問で示した方法を見えるように見えない、つまりそれは私が欲しいものではないことを意味します:) –

2

それは少しトリッキーだ(私はテキストを配置するために、相対+絶対位置と特定のパディングを使用します)が、それはあなたがマークアップを変更したり、heightを設定せずに尋ねた効果が行われます。

body { 
    padding: 10px; 
} 
img { 
    float: left; 
    position: absolute; 
    left : 10px; 
} 
div { 
    border: 1px solid black; 
    padding: 10px 10px 10px 280px; 
    position : relative; 
    overflow: hidden; 
} 

私はちょうどスタイル(でも挿入をfloat:leftが必要なくなった場合)

関連する問題