Right Side align with float

Question

Ho un widget di chat a cui aggiungo alcuni stili. Tuttavia ho difficoltà a rendere le bolle di chat "utente" allineate alla destra dello schermo.

Quando utilizzo il float a destra, con il float a sinistra (per l'altro lato) i div non si posizionano più correttamente, in quanto sembrano andare semplicemente a destra delle relative div.

Mi piacerebbe anche essere in grado di aggiungere div che causerà l'overflow-y per creare una barra di scorrimento. Che senza il galleggiante sta già funzionando come previsto.

Di seguito è la versione corrente in un jsbin.

http://jsbin.com/utulay/1/edit

TLDR; cercando di ottenere le div .chat-bubble-user per allineare a destra dello schermo senza float.

Answer 1

se non si vuole l'uso carri, basta provare con inline-block, in questo modo:

#chatWindow { 
    text-align: right; 
} 

.chat-bubble-user { 
    display: inline-block; 
    text-align: left; 
} 

JsBin (testato su FX20): http://jsbin.com/awimev/2/edit

Answer 2

È possibile utilizzare float:right sui messaggi utente e mettere un clearfix div dopo ciascuno:

http://jsbin.com/utulay/2/edit

<div class="chat-bubble-user"> 
    <div class="chat-bubble-glare-user"></div> 
    <p>I have a question about kittens?</p> 
    <div class="chat-bubble-arrow-border-user"></div> 
    <div class="chat-bubble-arrow-user"></div> 
</div> 
<div class="clearfix"></div> 

CSS

.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
.clearfix { 
    display: block; 
} 

Answer 3

È possibile utilizzare overflow: auto; per mantenere il rapporto del div contenitore. E utilizzare un'altezza fissa per consentire l'overflow-y.

#chatWindow { 
 
    border: 1px solid black; 
 
    background: white; 
 
    height: 56px; 
 
} 
 
.clearfix { 
 
    overflow: auto; 
 
} 
 
.chat-bubble-left { 
 
    float: left; 
 
} 
 
.chat-bubble-right { 
 
    float: right; 
 
} 
 
.chat-bubble-left, 
 
.chat-bubble-right { 
 
    border: 1px solid black; 
 
    margin: 1px; 
 
    padding: 1px; 
 
}

<div id="chatWindow" class="clearfix"> 
 
    <div class="chat-bubble-left"> 
 
    <p>On Left</p> 
 
    </div> 
 
    <div class="chat-bubble-right"> 
 
    <p>On right</p> 
 
    </div> 
 
    <div> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt ligula pharetra dui semper faucibus. Integer sed egestas est. Morbi semper libero non est rutrum, sit amet iaculis ante ullamcorper. Duis non vehicula turpis, nec scelerisque erat. 
 
    Pellentesque rhoncus libero non orci aliquam, in fermentum purus egestas. Nullam convallis velit quis laoreet porta. Fusce vehicula laoreet lobortis. Fusce eu dolor et turpis tempus tincidunt vel in neque. Nulla facilisi. Donec non gravida magna. 
 
    Mauris vulputate eros in ex pretium iaculis. Vivamus aliquet ante ligula, eget lobortis mi tincidunt consectetur. Integer non nisl non mi tristique posuere. 
 
    </div> 
 
    <div> 
 
    Donec sed elementum risus, sed malesuada justo. Aenean et tincidunt nunc. Suspendisse non eros ut sem vehicula lobortis id non nisl. Duis eleifend porta porta. Cras aliquet ex id mauris suscipit rutrum. In tristique porta ex, at rhoncus mi interdum efficitur. 
 
    Donec eget consequat nulla, vitae bibendum quam. Suspendisse potenti. Aenean et aliquet lacus, et ullamcorper urna. Sed eu leo viverra, tristique odio vel, sollicitudin ante. 
 
    </div> 
 
</div>

Answer 4

è stato un problema per qualche tempo fino a quando. Devi solo usare

text-align:right; 
display-inline:block; 

tutti nella membro padre;