1

私は次のような状況です（画像で表現します）：

1 番目の状況: 下の画像には小さなテキストがあり、すでに最初の問題を満たしています。私のリストの端も写真に従っていません: (. メッセージのサイズに関係なく、彼女がいつも私のメッセージに届かなかったらいいのに.

ここに画像の説明を入力

2 番目の状況: 非常に長いテキストがある場合、従わない場合、彼は転んでしまいます (画像の横に移動しません)。

ここに画像の説明を入力

私が期待する結果は次のとおりです。

ここに画像の説明を入力

このテーマの専門家ではないので、私のcssに何らかの調整が必要です。誰か助けに来てくれませんか？私のファイルjsFiddleに従ってください。費やした時間にすでに非常に感謝しています :) HERE JSFIDDLE DEMO

 li {

    border-bottom:1px solid gray;
     text-align: left;
    display:block;
}
.chat-window-user-img > img {
    height:50px;
    width:50px;
    float:left;
    padding:5px;
}
.chat-window-user-message{
   direction: ltr;    
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   border-collapse: collapse;
   border-spacing: 0;

}
4

1 に答える 1

1

overflow: auto両方の問題は、私が最近見つけた便利なトリックで解決できます。

に追加.chat-window-user-message:

display: block;
overflow: auto;

( の<div>代わりに A も機能していたはずですdisplay: block)

そしてへli：

overflow: auto;

例: http://jsfiddle.net/L6Pwq/14/
も参照してください: CSS: オーバーフローによるフロートのクリア

于 2013-07-07T05:02:03.393 に答える