Kullanıcı mesajlarını nasıl ayırırım ve yan yana istiflemelerini önlerim?

Question

1. Kutuları sola (bir kullanıcı için) ve sağa (başka bir kullanıcı için) konumlandırmalıyım.
2. Kutuların dikey olarak istiflenmesini istiyorum. Şimdi, pencereyi genişletdiğimde kutular yatay olarak yan yana dizileceklerdi.

   html düzeni

   <div class="chatwindow"> 
       <div class="chat"> 
       <div class="chat-other"> 
        <div class="chat-text"> chat content </div> 
        <span class="chat-time"> 4.09 pm </span> 
        <b>Other user</b> 
       </div> 
   
       <div class="chat-mine"> <!-- content --> </div> 
   </div> 
   

   CSS

   .chatwindow { 
       overflow-y:auto; 
   } 
   
   .chat-mine { 
       float: right; 
       clear: left; 
       max-width: 236px; 
       display: inline-block; 
       text-align: left; 
       position: relative; 
       border-radius: 7px; 
       box-shadow: 0 1px 2px rgba(0, 0, 0, .15); 
       margin-bottom: 9px; 
       margin: 6px; 
       padding:3px; 
       background-color: #66ffff; 
   } 
   
   .chat-other { 
       clear: right; 
       max-width: 236px; 
       position: relative; 
       border-radius: 7px; 
       box-shadow: 0 1px 2px rgba(0, 0, 0, .15); 
       margin-bottom: 9px; 
       margin: 6px; 
       padding:3px; 
       background-color: #ffffff; 
   } 
   
   .chat-text { 
       padding: 5px 7px; 
       word-wrap: break-word; 
   
       &::after { 
       content: " \00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0\00a0"; 
       display: inline; 
       } 
   } 
   
   .chat-time { 
       position: absolute; 
       bottom: 2px; 
       right: 7px; 
   } 
   

   altında

Benim kötü örnek JS bin bad example ekran görüntüsü

Bir tarafta benim tarafımdan mesajlar, diğer kullanıcı tarafından mesajlar almayı umuyorum. İdeal örnek: JS bin good example ekran görüntüsü aşağıda gösterilmiştir: ama pozisyon yapamam neden

emin değil: hem benim div ve diğer kullanım div üzerinde göreli onları her iki tarafta hizalanmış olması

Answer 1

Yanıtlarınızda (.chat-mine) float:right; ve diğer kullanıcıların cevaplarında (.chat-other) clear:right; kullanabilirsiniz.