Санна написал(а):как опустить статус пользователя в профиле под аватарку
Можно сделать список (.post-author ul) flex-контейнером с вертикальным расположением. В нём задаём свойство order, чтобы визуально переместить .pa-title сразу после .pa-avatar.
<style>
.post-author ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
margin: 0;
}
/* По умолчанию все элементы идут в порядке 0 */
.post-author li {
order: 10; /* отправим всё "вниз" по умолчанию */
}
/* Автор — остаётся первым */
.post-author .pa-author {
order: 1;
}
/* Аватар — второй */
.post-author .pa-avatar {
order: 2;
}
/* Статус — сразу после аватара */
.post-author .pa-title {
order: 3;
}
/* Остальные элементы — дальше по порядку, располагайте, как вам нужно */
.post-author .pa-reg { order: 4; }
.post-author .pa-posts { order: 5; }
.post-author .pa-respect { order: 6; }
.post-author .pa-positive { order: 7; }
.post-author .pa-last-visit { order: 8; }
</style>
Если нужно, чтобы между ником и аватаром был небольшой зазор (а то ник "лежит" на аватаре), задайте отступы (они задаются от предыдущего элемента в списке).
Это имеет такой вид:
.post-author li { order: 10; }
.post-author .pa-author { order: 1; margin-bottom: 5px; }
.post-author .pa-avatar { order: 2; margin-bottom: 3px; }
.post-author .pa-title { order: 3; margin-bottom: 3px; }
Используйте margin-bottom на элементах, где нужен отступ (если это вам нужно, конечно).
Отредактировано Merlin777 (Чт, 30 Окт 2025 15:39:08)