@lev89

Как сделать перенос блока на новую строку?

Как сделать так чтобы блоки размещались не в одну строку, а чтобы каждый блок с новой строки?
60b9d750aead3242041133.png
<div class="dialog">
                            <div class="d-content">
                                <span class="mess_username"><?=$item['user_name'];?></span>
                                <span class="mess_date"><?=$item['date'];?></span>
                                <span class="mess_text"><?=$item['message'];?></span>
                            </div>
</div>

.dialog {
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  padding: 10px 30px;

}

.d-content {
  display: inline-block;
  padding: 10px;
  background: #dcf8c6;
  border-radius: 0.4em;
  margin-top: 5px;
}

.mess_username {
  color: #1d5987;
  font-weight: 700;
  font-size: 12px;
}
.mess_date {
  color: #6c757d;
  font-weight: 400;
  font-size: 12px;
}
.mess_text {
  display: flex;
}
.new-message {
  padding: 5px 0;
}
  • Вопрос задан
  • 14275 просмотров
Пригласить эксперта
Ответы на вопрос 3
Можно сделать элемент диалога блочным элементом или обернуть в блочный элемент.
Ответ написан
Комментировать
@michaelvovk
.d-content{
display: block
}
.d-content span{
display: block;
width: fit-content
}
Ответ написан
Комментировать
Может подойдет:

.dialog {
   display: flex;
   flex-direction: column;
}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы