Question

我有一个HTML表格，其中一个单元格包含多个连续的HTML Div。在其中一个Div中是一个漂浮在右侧的图像。

问题：当浏览器窗口调整大小并且图像周围的Div扩展或收缩时，当Div高度动态变化小于图像时，图像可以在底部垂直剪切高度。

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>
    .
    .
    .

有关我可以采取哪些措施以确保图像不会被裁剪的想法？

谢谢，

谢

Answer 1

所以基于你评论你需要它：

<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 2

在你的div类中，添加：
溢出：可见

Answer 3

我测试了它，它看起来像＆＃34;溢出：可见＆＃34;是最有效的。

HTML Div是在浏览器窗口调整大小时剪切图像

3 个答案: