フロートなしの右揃え

Question

私はスタイリングを追加するチャットウィジェットを持っています。しかし、私は、 "ユーザー"チャットの泡を画面の右側に揃えるのが難しいです。

浮動小数点数をそのまま使用すると、浮動小数点数を左（他の側）に設定すると、divが正しく配置されなくなり、相対divの右に移動するように見えます。

また、オーバーフロー-yがスクロールバーを作成するdivを追加できるようにしたいと思います。浮動小数点なしでは、すでに期待どおりに動作しています。

以下はjsbinの最新バージョンです。

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

TLDR。 .chat-bubble-user divが浮動小数点なしで画面の右に揃うようにしようとしています。

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を使用することができます各1の後に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> 

あなたは含むdiv要素の比率を維持するためにoverflow: auto;を使用することができます

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

Answer 3

CSS。そして、オーバーフロー-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

それはまでいつかのために問題となっています。 あなただけを使用する必要があります

すべてが親メンバーにあります。