Выравнивание правой стороны без поплавка

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

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

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

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

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

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

Ответ 1

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

#chatWindow {
   text-align: right;
}

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

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

Ответ 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;
}

Ответ 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>