0

I have a big problem i was working on a chat system and designing the chat but i found i big problem which is my div is expanding horizontally and i want it to expand regular ( vertically ) and i tried alot of thing like clearfix and nothing happens !!!

<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;
}
4

2 回答 2

1

寻找这个

我已经改变了.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;
}
于 2013-04-30T15:21:35.540 回答
0

我将假设有问题的 div 是.nchatdiv？

您是否尝试过设置：

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

再加上一切都向左浮动 - 你为什么这样做？当然 display:inline-block 只会将它们全部堆叠在一起吗？

于 2013-04-30T15:10:52.347 回答