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

Question

[lev89]

Как сделать так чтобы блоки размещались не в одну строку, а чтобы каждый блок с новой строки?

<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;
}

Comments

[Ankhena]

Перестать задавать им inline-block.
Блочные элементы сами по себе располагаются с новой строки.

[lev89]

но мне надо чтобы ширина блока была по содержимому

[Антон Литвиненко]

Ankhena, да, но так он будет растянут на всю ширину. у меня вчера была такая штука, выглядеть должны как инлайн-блочные, но все идти с новой строки. в итоге помог display: table)

[Ankhena]

Антон Литвиненко, width: max-width

https://jsfiddle.net/e1czxvdt/

[lev89]

спасибо, все варианты подошли

Answer 1

[Никита Куликов]

Можно сделать элемент диалога блочным элементом или обернуть в блочный элемент.

Answer 2

[michaelvovk]

.d-content{
display: block
}
.d-content span{
display: block;
width: fit-content
}

Answer 3

[Евгений Банифатов]

Может подойдет:

.dialog {
   display: flex;
   flex-direction: column;
}