Sağ Taraf, yüzdürme olmadan hizala

Question

Bazı stilleri eklediğim bir sohbet widget'ım var. Ancak "kullanıcı" sohbet kabarcıklarını ekranın sağında hizalamakta zorluk çekiyorum. Artık pozisyon doğru div'leri (diğer taraf için) sol şamandıra ile şamandıra hakkını kullanırken

, ki onlar sadece göreli div sağına gidin görünmektedir.

Ben de taşma-y bir kaydırma çubuğu oluşturacaktır div 's eklemek mümkün olmak istiyorum. Şamandıra olmadan zaten beklendiği gibi çalışıyor.

Aşağıda, jsbin'deki mevcut sürüm yer almaktadır.

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

TLDR; Float olmadan ekranın sağa hizalamak için .chat-bubble-user divs almaya çalışırken.

Answer 1

Eğer sadece bu yüzden gibi inline-block ile deneyin, kullanım yüzen istemiyorsanız:

#chatWindow { 
    text-align: right; 
} 

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

JsBin (FX20 üzerinde test): http://jsbin.com/awimev/2/edit

Answer 2

Kullanıcı mesajlarıyla ilgili float:right kullanabilir ve koyun her bir sonra bir Clearfix div:

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> 

Sen içeren div oranını korumak için overflow: auto; kullanabilirsiniz

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

Answer 3

CSS. Ve taşmaya izin vermek için sabit bir yükseklik kullanın.

#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

o bazen kadar için bir sorun olmuştur. Yalnızca üst üyesi

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

tüm kullanmak zorunda;