像消息Convo一样向右和向左浮动Div

Question

我有这个简单的div容器，它就像今天大多数聊天盒中的convo查看器一样。发件人的信息将显示在右侧，而收件人则显示在左侧。

这是发件人邮件的容器：

<div id = "convo_ins_design">
   <div id = "convo_ins_sent">
     Content goes here
   </div>
</div> 

CSS：

#convo_ins_design{
  margin: 1.7vh;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

#convo_ins_sent {
  background: #FFFFFF;
  border-radius: 2vh;
  padding: 1vh;
  float: right;
}

结果如下：

给予足够的文字时：

很好。但是当给予较长的文本时，它会开始中断并偏离正常：

我只想让它看起来像这样：


当文本变长时，白盒/容器应该垂直延伸，而不是无限延伸到左边。

Answer 1

为容器设置明确的max-width并使用word-wrap。否则，容器将只需要适合您提供的内容所需的任何宽度，它将像您的示例一样溢出。我以100px为例。您应该将其更改为最适合您情况的内容。

＆＃13;

＆＃13;

#convo_ins_design{
  margin: 1.7vh;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

#convo_ins_sent {
  background: #eee;
  border-radius: 2vh;
  padding: 1vh;
  float: right;
  max-width: 100px; /* ADDED (make this value whatever is best)*/
  word-wrap: break-word; /* ADDED */
}

＆＃13;

<div id = "convo_ins_design">
   <div id = "convo_ins_sent">
     Hi
   </div>
   <div id = "convo_ins_sent">
     Content
   </div>
   <div id = "convo_ins_sent">
     Content goes here
   </div>
   <div id = "convo_ins_sent">
     Lots more content goes here and it should grow vertically instead of horizontal
   </div>
</div>

＆＃13;

＆＃13;

＆＃13;