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

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;"即可。这将清除或忽略所述元素上方的浮点数。有关"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>