バブルチャットCSS

< div class = "divide" > </ div > 
< div class = "user-right" > 2020-01-06 11:12:40王</ div > 
< div class = "chat-right" > 
    < スパン> wsw今日は天気がいいので一緒にビーチに行ってみませんか？？</ span > 
    < div class = "arrow-right" > </ div > 
</ div > 


< div class = "divide" > </ div >
= "user-left" >オンラインウェイター2020-01-06 11:12:40 </ div > 
< div class = "chat-left" > 
    < span >今日は天気が良いので、一緒にビーチに行く一緒にビーチに行く</ span > 
    < div class = "arrow-left" > </ div > 
</ div > 

< div class = "divide" > </ div > 
< div class = "user-right" > 2020-01-06 11 ：12：40ジェームズ</ div >
< div クラス= "chat-right" > 
    < span > wsw今日は天気が良いので、一緒にビーチに行きましょう、天気が良い、一緒にビーチに行きます、天気が良い、一緒にビーチに行きます、天気が良い、一緒にビーチに行きましょう天気はどうですか？一緒にビーチに行きませんか？？</ span > 
    < div class = "arrow-right" > </ div > 
</ div > 

< div class = "divide" > </ div > 
< div class = "user-right" > 2020-01-06 11 ：12：40 James.wang </ div > 
< div class = "chat-right" > 
    < span > wsw今日は天気がいいので、一緒にビーチに行ってみませんか？？</ span > 
    < div class = "arrow-right" > </ div > 
</ div > 

< style type = "text / css" > 
    .chat-right { position ：relative ; 高さ：自動; background-color ：＃f2f2f2 ; line-height ：26px ; パディング：5px 10px ; マージン：0px 80px 0 80px ; border-radius ：8px ;float ：右;  } 
    .chat-left { position ：relative ; 高さ：自動; background-color ：＃e6f2ff ; line-height ：26px ; パディング：5px 10px ; マージン：2px 80px 0 80px ; border-radius ：8px ; float ：左} 
    .arrow-right { 位置：絶対; 上：5px ; 右：-18px ; 幅：0 ; 高さ：0 ; ボーダー：10pxソリッド; border-color ：透明; border-left-color ：＃f2f2f2！重要; 表示：インラインブロック;  } 
    .arrow-left { position ：absolute ; top ：5px ; 左：-18px ; 幅：0 ;高さ：0 ; ボーダー：10pxソリッド; border-color ：透明; border-right-color ：＃e6f2ff！重要; 表示：インラインブロック;  } 
    .user-right { padding-right ：88px ; text-align ：右; 色：＃999 ;  } 
    .user-left { padding-left ：88px ; text-align ：左;色：＃999 } 
    .divide { 幅：100％; 高さ：1px ; 表示：インラインブロック;  } 
</ スタイル>