CSS make div show auf der rechten Seite

Question

Zunächst einmal bin ich total neu in CSS, also vielleicht ist das ziemlich einfach, aber ich habe es mit keinem Erfolg versucht, also habe ich mich entschieden hier zu fragen, da andere Antworten didn ' t Arbeit für mich (mit float: rechts, etc.) :(

Ich benutze this pen, um einen WhatsApp-Chat zu machen. Aber ich würde gerne, dass die Blase-Alt wurde auf der rechten Seite des Browsers angezeigt, nein Unabhängig von der Größe es ich habe versucht, mit dem float Attribute, wie folgt aus:..

.speech-wrapper .bubble { 
    width: 240px; 
    height: auto; 
    display: block; 
    background: #f5f5f5; 
    border-radius: 4px; 
    box-shadow: 2px 8px 5px #000; 
    position: relative; 
    margin: 0 0 0 0; 
    float: left; 
} 
.speech-wrapper .bubble.alt { 
    margin: 0 0 0 60px; 
    float: right; 
} 

Aber wenn ich es versuchen, es ist ein Chaos, und die Blasen sind alle auf dem Bildschirm Auch habe ich versucht, Marge rechts hinzuzufügen, aber es ist wie es gab keine Marge. Es kommt nach links.

Gibt es eine Möglichkeit, die "normale" Blase auf der linken Seite des Bildschirms und die "alt" Blase auf der rechten Seite zu zeigen?

Answer 1

Der Rand für alt sollte auf margin-left auto gesetzt werden. ist hier ein pen modifizierte

.bubble{ 
    width: 240px; 
    height: auto; 
    display: block; 
    background: #f5f5f5; 
    border-radius: 4px; 
    box-shadow: 2px 8px 5px #000; 
    position: relative; 
    margin: 0 0 25px; 
    &.alt{ 
    margin-left: auto; <--- here 
    } 

Answer 2

Sie können dies einfach hinzufügen:

.speech-wrapper .bubble.alt { 
    float: right; 
} 
.bubble { 
    clear: both; 
} 

https://codepen.io/anon/pen/dzVPNj

(Die clear: both; stellt sicher, dass alle Blasen unter einander sind)