css - 我需要将每个元素一个放在另一个下面，即使它适合下一个

Question

如标题所说，我需要像聊天应用一样将一个元素放在另一个元素之下。当消息很大时，它工作正常，但当文本与另一个相邻时，它会把它放在那里。我需要一种方法来执行此操作，我将附上一张图片。

<div class="other_message" v-for="item in messages" :key="item.data" v-if=" -- some condition --">
    {{ item.data }}
</div>
<div class="my_message" v-else>
    {{ item.data }}
[enter image description here][1]</div>

和 CSS

.other_message {
    max-width: 60%;
    float: left;
    text-align: left;
    background-color: #DDDDDD;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
    display: inline-block;
}

.my_message {
    max-width: 60%;
    float: right;
    text-align: left;
    background-color: #448AFF;
    color: #FFFFFF;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
}

Answer 1

只需添加“clear:both;”到元素。这将清除或忽略所述元素上方的 float 。有关“clear”属性的更多信息可在此处找到:MDN - Clear CSS

.other_message {
    max-width: 60%;
    float: left;
    text-align: left;
    background-color: #DDDDDD;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
    display: inline-block;
    clear: both; /* add this */
}

.my_message {
    max-width: 60%;
    float: right;
    text-align: left;
    background-color: #448AFF;
    color: #FFFFFF;
    margin: 2px;
    padding: 8px;
    border-radius: 5px;
    clear: both; /* add this */
}

<div class="other_message" v-for="item in messages" :key="item.data" v-if=" -- some condition --">
    {{ item.data }}
</div>
<div class="my_message" v-else>
    {{ item.data }}
[enter image description here][1]</div>