Разметка сета аватарок для адаптивного дизайна

[Tenno Seremel]

001

002

003

004

005

006

007

008

009

010

011

012

013

014

Разметка разбита на строки для читабельности. Для использования нужно либо выставить «Не заменять переносы строки на <br>» (и не забывать это делать при каждом редактировании), либо убрать переводы строк. P.S. Выровнять можно и по центру, поменяв left на center в самом начале.

<div style="text-align:left;font-size:14px;font-weight:normal;font-style:normal;overflow:hidden;"><div style="margin-left:-8px;margin-right:-8px;">
<div style="display:inline-block;margin:8px;"><div>001</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>002</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>003</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>004</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>005</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>006</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>007</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>008</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>009</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>010</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>011</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>012</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>013</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
<div style="display:inline-block;margin:8px;"><div>014</div><img src="https://static.diary.ru/userdir/6/7/8/5/67852/86123843.png"/></div>
</div></div>

Comments

[*Bacca*]

О, спасибо за код, вдруг пригодится.А неплохо ты у себя сделал, для тех кто любит поле на весь монитор))
А что, обычная таблица аватарок в адаптиве не работает тоже?

Посмотрела твои кнопки - отлично! работает! еще раз спасибо.
посмотрела этот аватарочный код у себя в табличном - все авки выстроились в одну вертикальную строку, как когда-то смайлы))
Много несостыковок между дизайнами, сложно будет на битвах.

[Tenno Seremel]

*Bacca*, адаптив может ужаться до 320 пикселей в ширину. С таблицей это означает либо очень маленькие картинки, либо растянутый за экран блок контента.

посмотрела этот аватарочный код у себя в табличном - все авки выстроились в одну вертикальную строку

Мой код работает на всех дизайнах. Но есть нюанс:

Для использования нужно либо выставить «Не заменять переносы строки на <br>» (и не забывать это делать при каждом редактировании), либо убрать переводы строк.

[*Bacca*]

О, ты ж писал про это, но я пропустила.

[Tenno Seremel]

*Bacca*, ещё бы эта опция сохранялась между редактированиями…(

[*Bacca*]

ну с иероглифами тоже надо галочку ставить, чтоб не улыбались)))

[Tenno Seremel]

*Bacca*, это да