HTML Div отсекает изображение как окно браузера получает размер

Question

У меня есть таблица HTML, где ячейка содержит несколько последовательных разделов HTML. В одном из Divs есть изображение, которое плавает вправо.

Проблема: В окне браузера изменяется и Див вокруг изображения расширяется или сжимается, то изображение может получить вертикально обрезаны на дне, когда высота Див динамически изменяется, чтобы быть меньше высоты изображения.

Example Page где вы можете увидеть возникшую проблему: http://nounz.if4it.com, где земной шар, в теле и справа, является изображением, о котором я говорю.

Код выглядит что-то вроде ...

<td class="td_BodyRight"> 
    <div class="div_RootBody"> 
    <h1 style="text-align:center; font: bold 1.5em Arial;">Welcome to the Home Page for this Example Web Site</h1> 
    </div> 
    <div class="div_RootBody"> 
    <img style="float:right; padding:3px; width:150px; height:150px" src="./IMAGES/MAIN/globe1.png" alt="Global NOUNZ"/ 
    <p><b>Note:</b> NOUNZ is a registered trademark of the International Foundation for Information Technology (IF4IT).</p> 
    <p>This entire Web Site was generated, in minutes, by the IF4IT NOUNZ platform and is in place as a live demonstration so that people can see and understand, for themselves, what the output of a NOUNZ compiled data set looks and feels like.</p> 
    <p>It should also be noted that the data contained and represented within this Web Site is strictly fabricated and for demonstration purposes. Such data is not intended nor should it be interpreted to represent anyone or anything outside this demonstration.</p> 
    </div> 
    . 
    . 
    . 

Любые мысли о том, что я могу сделать, чтобы убедиться, что изображение не обрезается?

Спасибо,

Frank

Answer 1

я тестировал его, и он выглядит как «переполнение: Видимое» является то, что работает лучше всего.

Answer 2

так, основанные на вас прокомментировать то, что вам нужно это:

<div class="div_RootBody"> 
    <img style="float:right; padding:3px; width:150px; height:150px" src="./IMAGES/MAIN/globe1.png" alt="Global NOUNZ"/ 
    <p><b>Note:</b> NOUNZ is a registered trademark of the International Foundation for Information Technology (IF4IT).</p> 
    <p>This entire Web Site was generated, in minutes, by the IF4IT NOUNZ platform and is in place as a live demonstration so that people can see and understand, for themselves, what the output of a NOUNZ compiled data set looks and feels like.</p> 
    <p>It should also be noted that the data contained and represented within this Web Site is strictly fabricated and for demonstration purposes. Such data is not intended nor should it be interpreted to represent anyone or anything outside this demonstration.</p> 
    <div style="clear:both"></div> 
    </div> 

Так что главное, <div style="clear:both"></div> в нижней части. Это будет анкер нижней части вашего div, чтобы он правильно расширялся с изменением размера изображения.

Answer 3

В классе сНа добавить:
переполнения: видимого