Нужно расположить блоки в виде чата, как на картинке. Помогите, пожалуйста, что я делаю не так и как это сделать правильнее, чище?
.text-align-center {
text-align: center;
}
.item:nth-child(even) {
direction: rtl;
}
.item {
position: relative;
margin: auto;
white-space: nowrap;
}
div {
display: block;
}
.person {
display: inline-block;
overflow: hidden;
position: relative;
vertical-align: middle;
}
.text {
display: inline-block;
vertical-align: middle;
font-size: 30px;
direction: ltr;
}
.all-chat {
width: 500px;
}
Chat
Ответ
Даю общие советы и перехожу к деталями вашего кода:
При вёрстке интересуйтесь предназначением CSS-свойств. То есть довод использования — просто потому что "так работает" используйте в последнюю очередь (если всё остальное не работает).
К примеру, вы используете свойство direction. Это свойство предназначено для указания направления текста. В большинстве языков текст пишется слева направо (значение ltr по умолчанию), но на арабском и иврите текст пишется справа налево и для этого текста указывается direction: rtl;. Получается, что вы используете это свойство не по назначению.
Осмотрительней используйте абсолютное позиционирование. В идеале его использовать только когда нужно чтобы элементы перекрывали другие и элемент извлёкся из потока отображения. К примеру, модальные окна, выпадающие списки с более сложным отображением, чем стандартный select и т.д. Также используется для в некоторых рецептах вроде поместить иконку внутри текстового поля. Но в данном случае не вижу в потребности в абсолютном позиционировании.
С большой осторожностью используйте псевдоселекторы (к примеру, first-child;, only-child, nth-child и т.д.). Потому что псевдоселекторы
игнорируют видимый блок или нет. То есть если вы скроете один из блоков с помощью display: none, он всё равно будет учитываться при применении псевдоселектора.
при применении учитывают лишь порядковый номер элемента относительно родителя. То есть псевдоселектор .item:nth-child(even) работает так "выбрать каждого чётного ребёнка, у которого есть класс item", а не так "выбрать каждый чётный элемент с классом item". Иллюстрирую примером:
.item:nth-child(even) {
background-color: red;
}
Если вы добавите элементы рядом с .item, вёрстка может сломаться.
Поэтому рекомендую посмотреть, может стоит задавать отдельные классы для особых типов элементов.
В данном случае, я полагаю также, что чат означает, что может быть несколько сообщений подряд от одного пользователя. Поэтому применение стилей только к чётным элементам, кажется неверным.
Изучите flexbox. Расположение элементов с помощью float, clear, vertical-align не обладает такой мощью и не такое гибкое и сопровождаемое. Изучите CSS-методологию. BEM или SMACSS. Для того, чтобы вы могли легко менять вёрстку, а также если такие же блоки или подобные нужны на других страницах вы бы их без проблем добавляли и меняли. В примере, я буду использовать BEM. Не используйте безликие или неоднозначные имена вроде .item. Это же может быть что угодно. Применение этого класса зависит от того, кто в нём родитель и что рядом находится. А это значит, что если где-то добавится блок .item, то те же стили для него и применятся, что, возможно, будет нежелательно. Относитесь к селекторам также как к переменным. У них должно быть строго определённое предназначение и имя должно чётко его отражать. Если вы назовёте, к примеру, chat-item, то уже более ясно значение этого блока. Относитесь к вёрстке как к программированию, для которого важна легкость восприятия, гибкость и сопровождаемость. Также не менее важно соответствие стандартов. Вёрстку портят дублирования кода, старайтесь их избегать. Использование современных препроцессоров с переменными, циклами, условиями делает вёрстку почти неотличимой от программирования.
Результаты
Для каждой серии сообщений создал блок .chat-item, где будет находиться аватар и одно или несколько сообщений от пользователя.
Для того, чтобы применять стили для инвертирования расположение (для отвечающего) колонки я задал flex-direction: row-reverse;, что инвертирует порядок расположения элементов.
Здесь использована методология BEM. Для того, чтобы не создавать дополнительные классы для вложенных элементов при инвертировании я пожертвовал чистотой BEM и добавил селекторы с вложенностью (.chat__item--responder .chat__message, .chat__item--responder .chat__message-content). По самой методологии (в идеале) следует использовать только классы без вложенности.
В результате код может выглядеть так:
.chat__header { text-align: center; } .chat__item { display: flex; align-items: flex-start; } .chat__person-avatar { border-radius: 50%; } .chat__messages { margin-left: 10px; } .chat__message { display: flex; align-items: center; margin-right: 10px; } .chat__message-content { border-radius: 5px; padding: 7px; background-color: #ccc; display: inline-block; margin-left: 5px; } .chat__item--responder { flex-direction: row-reverse; } .chat__item--responder .chat__message { flex-direction: row-reverse; } .chat__item--responder .chat__message-content { margin-left: 0; margin-right: 5px; }
Chat
Комментариев нет:
Отправить комментарий