Posso usare overflow: nascosto senza un'altezza esplicita in qualche modo?

Ho un'immagine con float:left e mi piacerebbe che trabocchi il suo genitore, ma interrompe l'overflow. Ecco come si presenta senza alcuna overflow regole:Posso usare overflow: nascosto senza un'altezza esplicita in qualche modo?

enter image description here

Ecco quello che voglio:

enter image description here

Ecco un violino: http://jsfiddle.net/ZA5Lm/

For some reason, si è deciso che overflow:hidden senza un esplicito risultati di altezza nel elemento in crescita.

Posso ottenere in qualche modo l'effetto che desidero senza impostare un'altezza esplicita? Un'altezza esplicita non funziona perché voglio ridimensionare automaticamente questo div in base alla lunghezza del contenuto e alla larghezza del browser.

fonte

2012-03-30 Roman Starkov

Le immagini hanno una larghezza fissa? – Jon

'overflow: hidden' (o qualsiasi altro valore diverso da' visible') fa sì che una casella crei un contesto di formattazione di blocco in cui contenere i float. L'espansione della scatola per adattarsi ai suoi galleggianti è solo uno degli effetti collaterali quando la casella ha altezza: automatica (altezza non esplicita). Non riesco a trovare alcuna spiegazione per * perché * esattamente un 'overflow' che non è' visible' crea un BFC, ma lo fa. – BoltClock

Cosa dovrebbe fare quando ridimensioni il viewport [come qui] (http://jsfiddle.net/YvEcK/)? – user123444555621

Secondo me l'uso di overflow: nascosto senza impostare dimensioni non ha senso. Se non si desidera specificare l'altezza del contenitore e se le immagini hanno una larghezza fissa si potrebbe utilizzare questa soluzione: http://jsfiddle.net/ZA5Lm/11/

L'immagine è posizionato con assoluta, portandolo fuori dal testo- flusso. Tuttavia, e sono consapevole che questo potrebbe essere brutto, è necessario specificare una spaziatura a sinistra per spostare il testo lontano dall'immagine.

fonte

2012-03-30 11:44:04

Grazie, penso che la tua soluzione sarà accettabile, proverà a vedere. Sono curioso, tuttavia, del perché pensi che esageri: nascosto non ha senso senza una dimensione _explicit_. Si noti che l'elemento genitore ha una dimensione definita _regardless_ se le dimensioni sono impostate in modo esplicito. –

Con l'elemento genitore intendi il ** div **? La sua altezza dipende dal suo contenuto (se non è specificata l'altezza). Il div non può crescere con il testo e ignorare l'altezza dell'immagine. l'overflow può solo nascondersi quando ha un confine, per questo dico che non ha senso. –

Intendo il div. Senza troppopieno: nascosto esso _viene crescere con il testo e ignorare l'altezza dell'immagine. In questa situazione, il div ha confini noti, l'immagine ha confini noti, quindi l'unica cosa che rimane è intersecarli e ritagliare l'immagine di conseguenza. Non è perfettamente definito? –

Ho visto un post su CSS-Tricks e ne ho parlato. Andare check it out a - http://css-tricks.com/minimum-paragraph-widths/

Potrebbe essere utile :) Buona fortuna

anche solo guardato il codice e ho aggiunto float: right al div in modo che appaia come questo -

div { 
border: 1px solid black; 
padding: 10px; 
float: right 
/*overflow: hidden;*/ 
}

Non so se è quello che vuoi?

fonte

2012-03-30 11:27:58

Ho appena provato questo - non sembra che il risultato appaia come ho mostrato nella mia domanda, il che significa che non è quello che voglio :) –

E 'un po' complicato (io uso relativo + posizionamento assoluto e un'imbottitura specifico per posizionare il testo), ma lo fa l'effetto che ha chiesto senza cambiare marcatura o l'impostazione height:

body { 
    padding: 10px; 
} 
img { 
    float: left; 
    position: absolute; 
    left : 10px; 
} 
div { 
    border: 1px solid black; 
    padding: 10px 10px 10px 280px; 
    position : relative; 
    overflow: hidden; 
}

Ho appena stile inserito (anche se float:left non fosse più necessario)

fonte

2012-03-30 11:49:34 fcalderan

Posso usare overflow: nascosto senza un'altezza esplicita in qualche modo?

risposta

Problemi correlati