web-dev-qa-db-ja.com

フロートなしの右側揃え

スタイリングを追加するチャットウィジェットがあります。ただし、「ユーザー」チャットのバブルを画面の右側に揃えることができません。

Float right（反対側）を使用して、float rightを使用すると、divは正しく配置されなくなり、相対divの右側に移動するように見えます。

Overflow-yがスクロールバーを作成するdivを追加できるようにしたいと思います。フロートなしで既に期待どおりに動作しています。

以下は、jsbinの現在のバージョンです。

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

TLDR; .chat-bubble-user divをフロートなしで画面の右側に揃えようとしています。

htmlcsshtml5css3twitter-bootstrap
19
zmanc

フロートを使用したくない場合は、inline-block、 そのようです：

#chatWindow {
   text-align: right;
}

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

JsBin（Fx20でテスト済み）： http://jsbin.com/awimev/2/edit

26
fcalderan

ユーザーメッセージで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;
}
6
martincarlin87

それはしばらくの間問題でした。あなただけを使用する必要があります

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

すべて親メンバー内。

0
Kondas Lamar Jnr