Làm thế nào tôi có thể đảm bảo một DIV trải dài để phù hợp với nội dung của nó?

Question

Tôi có HTML này với một bảng:

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

Được theo kiểu bằng CSS này:

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

Có vẻ OK trên màn hình lớn của tôi, nhưng khi tôi thay đổi với màn hình nhỏ của tôi phải nhất div, có hình ảnh bên trong nó, nổi bên ngoài của bố mẹ div. Có ai có một giải pháp cho điều đó không?

Answer 1

thiết

overflow: auto; 

cho div bên ngoài. Điều này sẽ làm cho div cha của bạn mở rộng mặc dù các con của nó có một thuộc tính float. (IE có một vài vấn đề với điều này, nhưng có thể được cố định bởi một số padding)

Answer 2

Float div cha cũng vậy.

Điều này có nghĩa là các phần tử con được thả nổi sẽ không nổi bật.

Answer 3

Có thể thử cung cấp cho div bên ngoài này css ...

display: inline-block;

Vì các phần tử nổi không thực sự có bất kỳ bố cục nào của riêng mình, div ngoài chỉ hoạt động như một div trống, không kéo dài để vừa với các phần tử bên trong.

Làm cho khối nội tuyến div bên ngoài về cơ bản sẽ làm cho các div bên trong chiếm một số không gian thực trong div bên ngoài.

Answer 4

tôi thường cung cấp cho:

overflow: hidden;

Tôi gặp sự cố khi tôi cung cấp lỗi : tự động; đôi khi div ngoài có thể hiển thị thanh cuộn.