Javascript 为什么Div水平扩展

我有一个大问题，我正在开发一个聊天系统并设计聊天，但我发现我有一个大问题，那就是我的div正在水平扩展，我希望它能正常（垂直）扩展，我尝试了很多东西，比如clearfix，但什么都没有发生

<div class="nchat">
<img class="chatimg" src="img/attach_1.jpg">
<div class="chatcontent">Hi</div>
<div class="sendt"><img width="10" height="10" src="img/star.png"> 14:20</div>
</div>

.nchat {
min-height: 40px;
}
.sendt {
background: none repeat scroll 0 0 #EFFFFF;
border-bottom: 1px solid #0099CC;
border-radius: 0 7px 7px 0;
border-right: 1px solid #0099CC;
border-top: 1px solid #0099CC;
color: #000000;
float: left;
font-size: 12px;
line-height: 13px;
margin: 12px 0 0 -1px;
padding: 1px 3px;
}
.chatimg {
border-radius: 5px 5px 5px 5px;
float: left;
height: 30px;
margin: 5px 10px;
width: 30px;
}
.chatcontent:before {
border-bottom: 7px solid transparent;
border-right: 7px solid #0099CC;
border-top: 7px solid transparent;
content: "";
height: 0;
margin: 1.5px 0 0 -16px;
position: absolute;
width: 0;
}
.chatcontent {
background: none repeat scroll 0 0 #0099CC;
border-radius: 7px 7px 7px 7px;
color: #FFFFFF;
float: left;
font-size: 14px;
margin: 10px 0 0;
padding: 2px 5px 2px 10px;    
max-width: 180px;
}

你好
14:20
恩查特先生{
最小高度：40px；
}
sendt先生{
背景：无重复滚动0 0#effff；
边框底部：1px实心#0099CC；
边界半径：0 7px 7px 0；
右边框：1px实心#0099CC；
边框顶部：1px实心#0099CC；
颜色：#000000；
浮动：左；
字体大小：12px；
线高：13px；
利润率：12px0-1px；
填充物：1px 3px；
}
查蒂姆先生{
边界半径：5px 5px 5px；
浮动：左；
高度：30px；
利润率：5x10px；
宽度：30px；
}
.聊天内容：之前{
边框底部：7px实心透明；
右边框：7px固体#0099CC；
边框顶部：7px实心透明；
内容：“；
身高：0；
利润率：1.5px0-16px；
位置：绝对位置；
宽度：0；
}
.聊天室内容{
背景：无重复滚动0 0#0099CC；
边界半径：7px 7px 7px 7px；
颜色：#FFFFFF；
浮动：左；
字体大小：14px；
利润率：10px0；
填充：2px 5px 2px 10px；
最大宽度：180像素；
}

我假设所讨论的div是

.nchat

div

您是否尝试过设置：

• 它们上的最小和最大宽度
• 固定宽度

再加上所有的东西都向左浮动-你为什么要这样做？一个display:inline块肯定会将它们都堆叠在一起吗？

正在查找

我已更改了

.chatcontent

.chatcontent {
background: none repeat scroll 0 0 #0099CC;
border-radius: 7px 7px 7px 7px;
color: #FFFFFF;
float: left;
font-size: 14px;
margin: 10px 0 0;
padding: 2px 5px 2px 10px;    
max-width: 180px;
clear: both;
word-wrap:break-word;
}

---

哪个部门？你能在JsFiddle.net中重新创建它吗？在完成你的div扩展之后？可能是因为你从来没有清除过你的float。使用float会破坏元素的自然流动。将

清除：两个

在您的聊天内容类之前。您是否尝试过设置您不想水平扩展的内容的

宽度

？@Magikano检查我的答案..我给出了

和word wrap

的示例。。。和下一行的每个

聊天

@贾斯汀：谢谢你的

clear:two

问题的div是。chatcontents因为雷胡尔·梅因达吉已经回答了这个问题，我不会继续了。谢谢好的，将消息（hi）更改为任何长消息或如下所示：eifjwijgiwgjowrgjoirjgorgjorwijg，然后查看发生了什么，它不会展开（它不会生成新行）！！！！选中更新的答案在答案中更新的新链接。如果你还需要什么，请告诉我？或者接受答案：D是的，它有效。。。。。非常感谢，但我不清楚：两个都只有单词包装：打破单词；