Come posso garantire un allungamento DIV per adattarlo al suo contenuto?

Ho questo HTML con una tabella:Come posso garantire un allungamento DIV per adattarlo al suo contenuto?

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

Essere designato da questo 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; 
}

Sembra OK sul mio monitor grande, ma quando cambio al mio piccolo monitor il più a destra div, che ha un'immagine al suo interno, galleggia all'esterno del genitore div. Qualcuno ha una soluzione per questo?

fonte

2009-07-21 hdx

Si prega di provare a mettere un po 'di sforzo nella formattazione dei frammenti di codice la prossima volta. A nessuno piace dover scorrere intorno a causa di tutti gli spazi bianchi che hai lasciato. – Welbog

@Welbog: +1 per quello .. – MarioRicalde

@hdx: Puoi darmi l'immagine che stai cercando di usare? poiché "" è in disordine. – MarioRicalde

set

overflow: auto;

per il div esterno. Questo dovrebbe far espandere il tuo genitore anche se i suoi figli hanno una proprietà float. (IE ha qualche problema con questo, ma può essere risolto da qualche imbottitura)

fonte

2009-07-21 19:47:46

In caso di problemi con le barre di scorrimento, provare overflow: nascosto invece. Si ottiene lo stesso comportamento esatto, senza alcuna possibilità di barre di scorrimento. – jrista

overflow di jrista: nascosto taglia il testo alla fine del div anziché il div espandendo per adattarsi a tutto il testo e non mostra una barra di scorrimento o –

Credo che sia il caso solo se specifichi effettivamente una larghezza e un'altezza per il div contenitore Se non si specifica uno o entrambi, il contenitore si espanderà per contenere i suoi figli. – jrista

Fa fluire anche il div genitore.

Ciò significa che gli elementi figlio flottati non ne fluttueranno.

fonte

2009-07-21 19:23:09 edeverett

Forse provare a dare il div esterno questo css ...

display: inline-block;

Poiché gli elementi fluttuanti non hanno alcun layout proprio, il div esterno agisce semplicemente come un div vuoto, non si allunga per adattarsi agli elementi all'interno di esso.

Fare il blocco inline div esterno renderà essenzialmente i div interni occupare uno spazio effettivo nel div esterno.

fonte

2009-07-21 19:28:23

Potrei dare al div esterno una larghezza anche al 99% anziché al 100%, dato che hai qualche pad su di esso. –

Io di solito dare:

overflow: hidden;

Ho avuto un problema quando ho dato overflow : auto; a volte il div esterno può visualizzare la barra di scorrimento.

fonte

2009-07-22 04:19:33 fluidbrush

Come posso garantire un allungamento DIV per adattarlo al suo contenuto?

risposta

Problemi correlati