다른 행에 오른쪽 플로트 및 왼쪽 플로트

Question

왼쪽에 요소가 떠 있고 오른쪽에 요소가 떠있는 상태로 두 줄로 나뉘어 있습니다. 텍스트가 메시지 div의 하단에 표시되는 채팅 클라이언트가되어야합니다. 어떤 이유로 인해 보내고받은 메시지가 같은 줄로 끝납니다.

여기에 html이 있습니다.

<div class="messages"> 
    <div class="message-list"> 
    <div class="message-row"> 
     <span class="sent-message">Hello world</span> 
    </div> 
    <div class="message-row"> 
     <span class="received-message">TESTING</span> 
    </div> 
    </div> 
</div> 

그리고 CSS를

.messages { 
    height: 500px; 
    position: relative; 
} 

.message-list { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
} 

.sent-message{ 
    float: right; 
} 

.received-message { 
    float: left; 
} 

그리고 jsfiddle. https://jsfiddle.net/5pdad3tx/

Answer 1

이 내용을 CSS에 추가하십시오! 작업이 FIDDLE

Answer 2

가 첫 번째 메시지 행 DIV 후 <br /> 추가

.message-row{ 
    clear:both; 
} 

!

<div class="messages"> 
    <div class="message-list"> 
    <div class="message-row"> 
     <span class="sent-message">Hello world</span> 
    </div><br /> 
    <div class="message-row"> 
     <span class="received-message">TESTING</span> 
    </div> 
    </div> 
</div> 

[내가 플로트 사용 후, 새 줄을 얻는 방법? : 왼쪽]의