Wyrównanie po prawej stronie bez pływaka

Question

Mam widżet czatu, do którego dodaję niektóre stylizacje. Mam jednak problem z ustawieniem bąbelków czatu "użytkownika" po prawej stronie ekranu.

Kiedy używam pływaka w prawo, z pływakiem w lewo (po drugiej stronie), dławiki nie są już ustawione poprawnie, w tym sensie, że wydają się po prostu iść na prawo od względnych elementów div.

Chciałbym również móc dołączyć div, które spowoduje przepełnienie -y, aby utworzyć pasek przewijania. Który bez pływaka działa już zgodnie z oczekiwaniami.

Poniżej znajduje się aktualna wersja jsbin.

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

TLDR; próbując przekonać użytkownika .chat-bubble-div do wyrównania do prawej strony ekranu bez unoszenia się.

Answer 1

jeśli nie chce use pływaków, po prostu spróbuj z inline-block, tak:

#chatWindow { 
    text-align: right; 
} 

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

JsBin (testowane na Fx20): http://jsbin.com/awimev/2/edit

Answer 2

Można użyć float:right na wiadomości użytkowników i umieścić clearfix div po każdym z nich:

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

Można użyć overflow: auto; zachować proporcje Twojego elementu div za. I użyj stałej wysokości, aby umożliwić przelew-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

to był problem dla kiedyś aż. Trzeba tylko użyć

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

wszystko w elemencie macierzystym;