2012-03-17 12 views
6

Dato questo piccolo violino: http://jsfiddle.net/5Sw3h/8/HTML5: Immagine in "display: table-cell" sinistra elemento spinge verso il basso contenuto di elemento giusto

ho un pannello di navigazione a sinistra, un pannello di contenuti per il centro e per dare un piccolo spazio a destra un pannello anche lì. Questi vengono posizionati usando "display: table, display: table-cell" semantics.

Attualmente sto sperimentando che mettendo il contenuto nel pannello di sinistra sembra spingere il contenuto nel pannello dei contenuti da alcuni, principalmente per l'immagine in là. Tuttavia sembra pus il contenuto un po 'in generale.

Ho provato le cose impostando il riempimento a 0 su alcuni elementi (come pensavo fosse prima), quindi ho provato l'allineamento verticale sul riquadro dei contenuti, alcuni posizionamenti relativi che definiscono "top". Ma nulla ha davvero aiutato ...

So che devo aver trascurato qualche cosa ovvia, proprio non riesco a trovarlo.

Qualcuno può aiutarmi a trovare ciò che mi manca?

risposta

15

Dove si dispone di display: table-cell, aggiungere vertical-align: top.

Il valore iniziale di vertical-align è baseline, che causa il disallineamento.

+0

Cheers! Questo ha aiutato ... – Jens

+0

salvato la vita, grazie MrGreen – chris

0

thirtydot ha già fornito un'ottima risposta. Tuttavia, dovrai affrontare un nuovo problema in Safari e Opera, quindi è meglio accertarsi di aver impostato la larghezza su tutti gli elementi della cella della tabella. Un altro problema è il supporto della tabella di visualizzazione/tabella-cella in IE 6/7 dove è possibile utilizzare uno script HTC scritto da Tanalin qui http://tanalin.com/en/projects/display-table-htc/.

Problemi correlati