Відмова від відповідальності
Списки поруч із плаваючими елементами викликають проблеми. На мою думку, найкращий спосіб запобігти подібним проблемам - це уникати плаваючих зображень, що перетинаються зі змістом. Це також допоможе, коли вам доведеться підтримувати чуйний дизайн.
Простий дизайн із центрованими зображеннями між абзацами виглядатиме дуже привабливо та буде набагато простіше підтримати, ніж намагатися надто фантазувати. Це також в одному кроці від a <figure>.
Але мені дуже хочеться плаваючих образів!
Гаразд, тому якщо ви досить божевільні наполегливі, щоб продовжувати цей шлях, є кілька прийомів, які можна використовувати.
Найпростіше зробити використання списку overflow: hiddenабо overflow: scrollтак , що список по суті термоусадкой , який тягне відступи туди, де це корисно:
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>
Однак у цієї техніки є кілька проблем. Якщо список стає довгим, він насправді не обертається навколо зображення, що в значній мірі перемагає цілі використання floatзображення.
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>
Але мені дуже хочеться обгортати списки!
Гаразд, тому якщо ви ще більш шалено наполегливіші і вам абсолютно потрібно продовжувати цей шлях, є ще одна техніка, яка може бути використана для обгортання елементів списку та підтримки куль.
Замість того, щоб набивати <ul>та намагатися змусити себе добре поводитись із кулями (чого, схоже, ніколи не хочеться робити), відбирайте ці кулі подалі від них <ul>та віддавайте їх <li>. Кулі небезпечні, і <ul>справедливі недостатньо відповідальні, щоб правильно поводитися з ними.
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>
Таке поводження може робити дивні речі для складного вмісту, тому я не рекомендую додавати його за замовчуванням. Набагато простіше налаштувати його як щось, що можна вибрати, а не щось, що треба переосмислити.
