div不会做它应该做的事情

Question

它应该被打破

但是div们彼此坐在一起，认为他们不这样做。我的蓝色信息应该向右浮动，而另一个向左浮动但是它们在侧面叠加。请帮助我。如果您无法查看图片，请访问此链接http://imgur.com/tUZfKdf。

继承人我的css：

.convo_mes_me{
background:blue;
padding:3px;
margin:8px 3px;
height:auto;
color:#fff;
text-overflow:ellipsis;
word-wrap: break-word;
float:right;
max-width:45%;
border-radius:5px;
}

.convo_mes_him{
border-radius:5px;
max-width:45%;
background:#f2f2f2;
padding:3px;
margin:8px 3px;
height:auto;
width:auto;
float:left;
text-overflow:ellipsis;
word-wrap: break-word;

}

在php中继承我的HTML：

if($sender == $user){
        echo "
        <br />
        <div class='convo_mes_me'>
        $sender: $message
        </div><br />
        ";
    }else{
        echo "
        <br />
        <div class='convo_mes_him'>
        $sender: $message
        </div><br />
        ";
    }

Answer 1

这就是浮动div的工作方式。您应该在消息之间使用某种clearfix来分隔它们。我建议您在它们之间添加<div>或将每条消息包装在另一个<div>中。在这两种情况下，这个新div应为float: left和width: 100%。

另外，摆脱<br> s。

Answer 2

这是因为你只是漂浮你的div。而且由于div可以彼此相邻，他们会。

您可以在每条消息之间插入一个空的100％div样式，并使用clear：

查看此页面了解疯狂浮动善良https://css-tricks.com/all-about-floats/