html - CSS は画像が浮いているときに高さを保持します

Question

float: left次のように、属性とテキストがすぐ隣にある写真を持つdivがあります。

<div id='1'>
 <img src='img.jpg' width='50%' style='float:left;' />
  This is text next to it<br/><br/>More text
</div>

画像のサイズやテキストの高さはわかりませんが、テキストが画像よりも短いことが多く、div が画像よりも短くなります (これは非常に見栄えが悪くなります)。これを修正する方法はありますか？

Answer 1

overflow: hidden;最初に追加するだけdivです。

またids、数字から始めることclassesはCSSできません。

Answer 2

最適な解決策は、最後に新しい div を追加し、それですべてをクリアすることだと思います。このような：

最初のケースの CSS:

#1:after{
    content: "";
    height: 0;
    clear: both;
    display: block; 
}

2 番目のケース: HTML:

<div id='1'>
 <img src='img.jpg' width='50%' style='float:left;'>
  This is text next to it<br><br>More text
  <div class="cl"></div>
</div>

CSS:

.cl {
clear: both;
}

または、最も古いバージョンの IE で実行する場合は、次を追加できます。

.cl { 
font-size: 0; 
line-height: 0; 
text-indent: -4000px; 
clear: both;
}