Zrzeczenie się
Listy obok elementów pływających powodują problemy. Moim zdaniem najlepszym sposobem zapobiegania tego rodzaju pływającym problemom jest unikanie pływających obrazów, które przecinają się z treścią. Pomoże również, gdy będziesz musiał wspierać projektowanie responsywne.
Prosty projekt z wyśrodkowanymi obrazami między akapitami będzie wyglądał bardzo atrakcyjnie i będzie o wiele łatwiejszy w obsłudze niż próba uzyskania zbyt fantazyjnego. Jest też o krok od a <figure>.
Ale naprawdę chcę pływających obrazów!
Ok, więc jeśli jesteś szalona uporczywy wystarczająco, aby kontynuować tę ścieżkę, istnieje kilka technik, które mogą być użyte.
Najprościej jest użyć listy overflow: hiddenlub overflow: scrolltak, aby lista była zasadniczo zawinięta, co powoduje cofnięcie wypełnienia do miejsca, w którym jest przydatne:
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>
Ta technika ma jednak kilka problemów. Jeśli lista stanie się długa, w rzeczywistości nie zawija się wokół obrazu, co w zasadzie podważa cały cel użycia floatna obrazie.
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>
Ale naprawdę chcę zawijać listy!
Ok, więc jeśli jesteś jeszcze bardziej szalony, bardziej wytrwały i absolutnie musisz kontynuować tę ścieżkę, istnieje inna technika, której można użyć do zawijania elementów listy i utrzymywania pocisków.
Zamiast wypełniać <ul>i próbować sprawić, by zachowywał się ładnie z pociskami (czego nigdy nie chce robić), wyjmij te kule <ul>i daj je <li>s. Kule są niebezpieczne, a po <ul>prostu nie są wystarczająco odpowiedzialne, aby właściwie się z nimi obchodzić.
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>
To zachowanie zawijania może robić dziwne rzeczy w złożonej zawartości, więc nie polecam dodawania go domyślnie. O wiele łatwiej jest ustawić go jako coś, na co można się zdecydować, niż coś, co należy zastąpić.
