Question

我有一个很大的问题，我正在聊天系统和设计聊天，但我发现我的大问题是我的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;
}

Answer 1

寻找this

我更改了.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;
}

Answer 2

我会假设有问题的div是.nchat div？

您是否尝试过设置：

它们的最小和最大宽度。
固定宽度

另外一切都浮在水面上 - 你为什么要这样做？肯定是一个显示：内联块只是将它们全部叠加在一起？

为什么Div保持水平扩展

2 个答案: