CSS: forza il testo da avvolgere (O definisce la larghezza dell'elemento solo da uno dei suoi figli)

Ok, questo è strano per me. Ecco l'elemento HTML con cui sto lavorando:CSS: forza il testo da avvolgere (O definisce la larghezza dell'elemento solo da uno dei suoi figli)

LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png

Una foto con una didascalia. Idealmente, mi piacerebbe farlo sembrare come questo, attraverso la pura CSS:

alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png

La larghezza dell'elemento genitore dell'immagine deve essere dipendente dalla dimensione dell'immagine.

Posso cambiare il codice tutto ciò di cui ho bisogno. (Il testo non è attualmente nel proprio div, ma può essere se necessario.) C'è un modo in CSS per realizzare questo? Ho l'impressione che ho bisogno di "forzare" il testo per avvolgerlo il più possibile (che non sembra possibile), o rendere la larghezza dell'intero elemento dipendente da un solo elemento e ignorare l'altro (che non ho mai sentito di prima).

c'è un vero modo? O devo invece usare Javascript magico? (La soluzione JS è abbastanza semplice, ma piuttosto zoppo ...)

fonte

2009-05-18 Matchu

Dai un'occhiata a questo great article sui migliori modi di gestire lo scenario image-with-a-caption.

Personalmente questo è uno di quei casi in cui devi succhiarlo e andare con quello funziona.

fonte

2009-05-18 17:27:52

Rendi il contenitore un tavolo con layout di tabella: fisso e posiziona l'immagine nella riga superiore. Puoi farlo anche con CSS puro usando il display: table- * properties (e la libreria IE7-js per compatibilità IE6).

Quale layout di tabella: fisso fa rendere l'algoritmo di disegno della tabella bloccare la larghezza di ogni colonna della tabella una volta che la larghezza della prima cella in quella colonna è nota. La didascalia non avrà un posto dove espandersi, quindi si avvolgerà alla larghezza dell'immagine (la prima cella).

fonte

2009-05-18 17:12:33 SpliFF

Cercando quello che stai descrivendo; deve fare qualcosa di sbagliato

ciao world

ciao ragazzi come state?

come codice di esempio sembra rendere la tabella come di solito la vedo, impostata dalla sua colonna più ampia. Qualcos'altro che devo definire? – Matchu

Sembra layout di tabella: risolto fallisce quando la larghezza della tabella è automatica. Ho trovato una soluzione migliore anche se funziona (vedi la mia altra risposta). – SpliFF

La risposta table funzionerebbe. Facilmente. Non riesco a incoraggiare l'uso di ma la facilità d'uso ha il merito. Stavo per suggerire di utilizzare la proprietà CSS clip:, ma non riesco a farlo funzionare sul mio computer locale (per qualche motivo, sebbene renderizza lo example allo cssplay.co.uk perfettamente).

Lo svantaggio di questo è che probabilmente funziona solo se si definiscono larghezze fisse per i contenitori. Sono sicuro che ci deve essere un modo, però. Continuerò a cercare.

fonte

2009-05-18 17:25:32

Va bene, sembra che non ci sia una soluzione semplice che riesco a realizzare. Grazie per avermi aiutato a risolverlo :)

Penso che, dato come conserverò quelle immagini, l'accesso alla larghezza non implicherà un ricalcolo costante. Potrei semplicemente usare quella magia lato server, invece.

Grazie!

fonte

2009-05-18 22:11:41 Matchu

Ecco una soluzione che probabilmente non funziona per voi, anche se lo fa produrre il layout che avete richiesto:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 

<head> 
<style> 
div.a {float: left; 
     position:relative;} 

div.b { 
     position: absolute; 
     top: 100%; 
     left: 0; 
     right: 0; 
     text-align: center; 
     background-color:gray;} 

</style> 
</head> 

<body> 

<div class="a"> 
<img src="http://stackoverflow.com/content/img/so/logo.png" alt=""> 
<div class="b">Caption text Caption text Caption text Caption text Caption text </div> 
</div> 

</body> 
</html>

Si vede il motivo per cui non è soddisfacente se si inserisce alcuni contenuti al di sotto del div a. Si sovrapporrà alla didascalia, perché la didascalia posizionata in modo assoluto non estendeva il div principale verticalmente.Potrebbe comunque funzionare per te se hai abbastanza spazio bianco in ogni caso o se sei disposto a prenotarlo.

fonte

2009-05-18 22:43:12

Mi è venuta una soluzione funzionante e abbastanza pulita.

La soluzione utilizza una tabella (o div con display: tabella se si preferisce) e aggiunge una seconda colonna per "spingere" la prima cella nello spazio minimo di cui ha realmente bisogno. La tabella può essere impostata su 1 px di larghezza per impedirne la crescita nella pagina. Ho messo insieme una demo per mostrare in azione:

http://test.dev.arc.net.au/caption-layout.html

provato e funzionando in IE8, Firefox e Safari/Win

fonte

2009-05-19 04:18:46 SpliFF

CSS: forza il testo da avvolgere (O definisce la larghezza dell'elemento solo da uno dei suoi figli)

risposta

Problemi correlati