Комментарий #10313653
ApcApc

Apc
в топике Обсуждение клуба CSS-club – настройка внешнего вида сайта
@Hayart, Сам по себе .b-replies { order: -1; } не работает.
Мне удалось добиться того же вида, что на твоём скриншоте с помощью
.body { display: flex; flex-direction: column; }
.b-replies { order: -1; }
Но flex-direction: column; растягивает все элементы внутри .body на всю ширину. Такие как .b-mention, .smiley и т.д. 1135x808
А мне такого не надо. У меня пока только мысль, что нужно как-то поотменять флексы каждому лишнему элементу внутри .body, по отдельности (не знаю как).

@grin3671,
Мой вариант
#profiles_feed div.subheadline:nth-child(1),
#profiles_feed .editor-container > .subheadline {
  font-size: 0;
  letter-spacing: 0;
}
#profiles_feed div.subheadline:nth-child(1) {
/*content: "Стена";
  vertical-align: top;
  font-size: 14px;
  letter-spacing: .13px;*/
  visibility: hidden;
}
#profiles_feed .editor-container > .subheadline:after {
  content: "Стена";
  vertical-align: top;
  font-size: 14px;
  letter-spacing: .13px;
}
#profiles_feed .block,
#profiles_feed .editor-container { transform: scale(1, -1); }
#profiles_feed .b-comments {
transform: scale(1, -1);
display: flex;
flex-direction: column-reverse;
}
1919x9251920x925
Твой вариант
#profiles_feed div.subheadline:nth-child(1),
#profiles_feed .editor-container > .subheadline {
  font-size: 0;
  letter-spacing: 0;
}
#profiles_feed div.subheadline:nth-child(1) {
  content: "Стена";
  vertical-align: top;
  font-size: 14px;
  letter-spacing: .13px;
/*visibility: hidden;*/
}
#profiles_feed .editor-container > .subheadline:after {
  content: "Твой комментарий";
  vertical-align: top;
  font-size: 14px;
  letter-spacing: .13px;
}
/* Блок с новым комментарием вверху */
#profiles_feed .block > div,
/* Обратный вывод комментариев (новые вверху) */
#profiles_feed .b-comments {
  display: flex;
  flex-direction: column-reverse;
}
1920x9251920x925
Твой вариант почему-то выводит заголовку Лента надпись в середину и ломает ему переименование в "Стену". Ну и если заголовок Лента оставлять, то по хорошему его надо переместить под текстовый редактор, а это морока. Плюс, мне нравиться мой отступ снизу, который сам собой получается за счёт скрытия этого заголовка.
@Hayart
Ответы
Hayart
Hayart#
ApcApc
Сам по себе .b-replies { order: -1; } не работает.
Мне удалось добиться того же вида, что на твоём скриншоте с помощью

.body { display: flex; flex-direction: column; }
.b-replies { order: -1; }
Прости, что не дописал, что это свойство применяется только к элементам с родителем с display: flex. Но ты и сам догадался, что к чему, поздравляю.
Как домой приеду, подумаю, как тебе можно помочь. А сейчас посоветую пользоваться F12(консоль разработчика) для экспериментов с твоим css
@Apc
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode