Правая сторона выравнивается без поплавка

Question

У меня есть виджет чата, к которому я добавляю стиль. Однако у меня возникают трудности с тем, чтобы «пользовательские» чаты чата выравнивались вправо от экрана.

Когда я использую float right, с поплавком влево (для другой стороны) divs больше не позиционируются правильно, поскольку они, похоже, просто идут справа от относительных div.

Я бы хотел, чтобы он также мог добавлять div, что приведет к тому, что overflow-y создаст полосу прокрутки. Который без поплавка уже работает, как ожидалось.

Ниже приведена текущая версия в jsbin.

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

TLDR; пытаясь заставить div .chat-bubble-user выравниваться по правому экрану без поплавка.

Answer 1

, если вы не хотите использования поплавков, то попробуйте inline-block, например, так:

#chatWindow { 
    text-align: right; 
} 

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

JsBin (проверено на Fx20): http://jsbin.com/awimev/2/edit

Answer 2

Вы можете использовать float:right на пользовательских сообщений и положить 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> 

CSS

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

Answer 3

Вы можете использовать overflow: auto;, чтобы сохранить соотношение вашего объемлющего Div в. И используйте фиксированную высоту, чтобы позволить переполнение-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

это была проблема на некоторое время, пока. Вы должны использовать только

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

все в родительском элементе;