Avertissement
Les listes à côté des éléments flottants posent des problèmes. À mon avis, le meilleur moyen d'éviter ce type de problèmes flottants est d'éviter les images flottantes qui se croisent avec le contenu. Cela aidera également lorsque vous devrez prendre en charge la conception réactive.
Une conception simple consistant à centrer des images entre les paragraphes semblera très attrayante et sera beaucoup plus facile à supporter que d'essayer d'être trop sophistiquée. C'est aussi à un pas d'un <figure>.
Mais je veux vraiment des images flottantes!
Ok, donc si tu es fou assez persistant pour continuer dans cette voie, il y a des techniques de couple qui peuvent être utilisés.
Le plus simple est de faire en sorte que la liste utilise overflow: hiddenou overflow: scrollpour que la liste soit essentiellement réduite, ce qui ramène le remplissage là où il est 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>
Cette technique présente cependant quelques problèmes. Si la liste devient longue, elle ne s'enroule pas réellement autour de l'image, ce qui va à l'encontre de l'objectif de l'utilisation floatde l'image.
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>
Mais je veux vraiment emballer des listes!
Ok, donc si vous êtes encore plus fou, plus persévérant et vous devez absolument continuer sur cette voie, il existe une autre technique qui peut être utilisée pour envelopper les éléments de la liste et maintenir les puces.
Au lieu de remplir le <ul>et d'essayer de le faire se comporter correctement avec des balles (ce qu'il ne semble jamais vouloir faire), retirez ces balles du <ul>et donnez-les au <li>s. Les balles sont dangereuses, et le <ul>juste n'est pas assez responsable pour les gérer correctement.
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>
Ce comportement d'encapsulation peut faire des choses étranges sur du contenu complexe, je ne recommande donc pas de l'ajouter par défaut. Il est beaucoup plus facile de le configurer comme quelque chose qui peut être choisi plutôt que comme quelque chose qui doit être remplacé.
