如何确保DIV伸展以适应其内容？

Question

我有一个表格的HTML:

<div
  class="currentDesignDiv"
  style="margin-bottom:5px;">
  <div>
    <img
      alt="Thumbnail"
      src="http://www.propertyware.com/templates/
        <bean:write name="currentTemplate" property="primaryKey"/>
      /thumb.gif"/>
  </div>
  <div>
    <table>
      <tr>
        <th>Your Current Design: </th>
        <td>Template #: 
          <bean:write name="currentTemplate" property="primaryKey"/>
        </td>
      </tr>
      <tr>
        <th>Last Updated: </th>
        <td>
          <bean:write name="currentTemplate" property="modifiedByAsString"/>
        </td>
      </tr>
      <tr>
        <th>Total Pages: </th>
        <td>
          <bean:write name="numberOfPages"/>
        </td>
      </tr>
    </table>
  </div>

由这个CSS风格:

 .currentDesignDiv{
   background-color:#e7e7e7;
   border:1px solid #9c9c9c;
   padding:5px;
   width:100%;
   min-width:860px;
 }
 .currentDesignDiv div{
   float:left;
   width:33%;
 }
 .currentDesignDiv div table{
   font-size:9pt;
   text-align:left;
   margin:17px;
 }
 .currentDesignDiv div:first-child img{
   margin:17px;
   width:80px;
 }

它在我的大显示器上看起来还不错,但是当我换到我的小显示器时,最右边的显示器div里面有一个图像,浮在父母的外面div.有人有解决方案吗？

Answer 1

组

overflow: auto; 

对于外部div.这应该使您的父div扩展,即使其子项具有浮动属性.(IE有一些问题,但可以通过一些填充修复)

Answer 2

或许尝试给外部div这个css ...

display:inline-block;

由于浮动元素实际上没有自己的任何布局,因此外部div就像一个空div,而不是伸展以适应其中的元素.

使外部div内联块将基本上使内部div占用外部div中的一些实际空间.