27

誰かが次のフィドルを見ることができますか：http：//jsfiddle.net/R4bCy/1/

要素が絶対的に配置されていない限り、divは要素を収容するために高さを調整する必要があると思いました。

divが画像の高さ全体に拡大しないのはなぜですか？

画像を右揃えにする必要があります。これを行う方法を私が知っている唯一の方法はalign='right'、、position:absolute; right: 0;およびfloat:rightです。これらはすべて、含まれているdivがその高さを画像の高さに調整しないようにします。

4

5 に答える 5

32 
.intro {
margin: 10px;
outline: 1px solid #CCC;
background: #A00;
color: #FFF;
height:auto;
overflow:auto;
}
​.img{
float:right;
height:auto;
}​

<div class="intro">
    <div class="img"> <img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s1600/tall+copy.jpg"    style="margin: 10px 10px; "/></div>

  <p>Sorry, but the page you requested could not be found.</p>
</div>​​​​​​​​​​

デモ

于 2012-10-02T18:09:18.550 に答える
12

「なぜdivが画像の全高まで拡大しないのですか？」

フロートはブロックとオーバーラップするため、ブロックフォーマットコンテキストのみにフロートが含まれます。（ここでトピック全体のかなり良い概要を見つけることができます：http ：//www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ ）

手元の問題を解決するために：

はalign=right実際にはimgになりますfloat: right（align属性は非推奨であり、cssを使用する必要があります）。

フロート画像をその親に含めるにはdiv、親divにブロックフォーマットコンテキストを確立させる（ブロックフォーマットコンテキストはネストされたフロートを囲む）か、またはimgとしてスタイル設定された後に追加の要素を使用してフロートを明示的にクリアする必要がありますclear: right。

ブロックフォーマットコンテキストを作成する簡単な解決策は、親divもフロートすることですが、この場合の私の好ましい解決策は、単に親をに設定するoverflowことですhidden（これもブロックフォーマットコンテキストになります）。

更新されたフィドルhttp://jsfiddle.net/R4bCy/8/をチェックしてください。

于 2012-10-02T18:23:55.520 に答える
2

あなたがする必要があるのは、pタグの後に追加することです、

<div style="clear:both;"></div>
于 2012-10-02T18:14:42.243 に答える
1

おっと、お詫び、投稿し、あなたはあなたの質問を編集しました-整列権は私が信じているように浮かんでいます（代わりにfloat：rightとある種のclearfixを使用する必要があります）。

例： http： //jsfiddle.net/R4bCy/5/

于 2012-10-02T18:06:40.453 に答える
1

これは私があなたが望むと信じているものです：http： //jsfiddle.net/R4bCy/6/

左側のテキストが必要で、画像が右側に浮いている場合は、CSSを使用してください：http： //jsfiddle.net/R4bCy/15/

divコンテナ内に幅50％の2つのを含めることもできますdiv。divこれにより、テキストと画像にはそれぞれ独立した属性を持つ独自の変更可能なが含まれるため、画像の配置にもう少し柔軟性があります。

于 2012-10-02T18:21:57.223 に答える