L’immagine è floattata a sinistra, e l’elenco che segue ha list-style-position: outside.
- Abbiamo applicato all’elenco la proprietà
overflow: hidden: questo evita che i puntatori si sovrappongano all’immagine - Inoltre abbiamo aggiunto un
padding-left: 2em - Questo è sufficiente a rendere nuovamente visibili i puntatori della lista.
Anche questo esempio ha un problema. Lo potete notare se ridimensionate la finestra: la lista si muove in blocco sotto l’immagine, oltre un certo livello di ridimensionamento. Questo comunque non occulta alcun contenuto ed è preferibile al comportamento di default.
C’è ancora un problema, che accade quando l’immagine ha un height minore di quello della lista: lo vediamo nel prossimo esempio