0

私はチャットシステムに取り組んでいてチャットを設計していたときに大きな問題を抱えていましたが、私の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;
}
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

問題の.nchatdivはdivだと思いますか？

次のいずれかを設定してみましたか:

  • それらの最小幅と最大幅。
  • 固定幅

さらに、すべてが左に浮かんでいます。なぜこれを行ったのですか? 確かに display:inline-block はそれらをすべて隣り合わせに積み重ねるだけでしょうか?

于 2013-04-30T15:10:52.347 に答える