disconoscimento
Gli elenchi accanto agli elementi mobili causano problemi. Secondo me, il modo migliore per prevenire questo tipo di problemi fluttuanti è evitare le immagini fluttuanti che si intersecano con il contenuto. Aiuterà anche quando devi supportare la progettazione reattiva.
Un design semplice con immagini centrate tra i paragrafi sembrerà molto attraente e sarà molto più facile da supportare che cercare di diventare troppo fantasioso. È anche ad un passo da a <figure>.
Ma voglio davvero immagini fluttuanti!
Ok, quindi se sei pazzo abbastanza persistente da continuare su questa strada, ci sono un paio di tecniche che possono essere usate.
Il più semplice è fare in modo che l'elenco venga utilizzato overflow: hiddeno in overflow: scrollmodo tale che l'elenco sia sostanzialmente ridotto, il che riporta il padding al punto in cui è utile:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Questa tecnica presenta alcuni problemi. Se l'elenco si allunga, in realtà non avvolge l'immagine, il che praticamente vanifica l'intero scopo dell'utilizzo floatsull'immagine.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Ma voglio davvero elenchi di wrapping!
Ok, quindi se sei ancora più pazzo e più persistente e devi assolutamente continuare su questa strada, c'è un'altra tecnica che può essere utilizzata per avvolgere gli elementi dell'elenco e mantenere i punti elenco.
Invece di riempire <ul>e cercare di far sì che si comporti bene con i proiettili (cosa che non sembra mai voler fare), togli quei proiettili da <ul>e consegnali a quelli <li>. I proiettili sono pericolosi e il <ul>giusto non è abbastanza responsabile per gestirli correttamente.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Questo comportamento a capo può fare cose strane a contenuti complessi, quindi non consiglio di aggiungerlo per impostazione predefinita. È molto più facile configurarlo come qualcosa su cui si può optare piuttosto che come qualcosa che deve essere ignorato.
