-1

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

问题：随着浏览器窗口大小的调整以及图像周围的 Div 扩展或收缩，当 Div 高度动态更改为小于图像高度时，图像可能会在底部垂直裁剪。

您可以看到问题发生的示例页面位于：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>
    .
    .
    .

关于我可以做些什么来确保图像不会被剪裁的任何想法？

谢谢，

坦率

4

3 回答 3

0

所以根据你评论你需要什么：

<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 的底部，因此它将随着图像大小的变化而正确扩展。

于 2013-05-31T18:31:56.050 回答
0

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

于 2013-05-31T18:41:06.207 回答
-2

我对其进行了测试，看起来“溢出：可见”是最有效的。

于 2013-06-03T01:13:18.367 回答