21

スタイルを追加するチャット ウィジェットがあります。ただし、「ユーザー」のチャット バブルを画面の右側に揃えるのに苦労しています。

右にフロートを使用し、(反対側に) 左にフロートを使用すると、相対 div の右側に移動するように見えるため、div が正しく配置されなくなります。

オーバーフローyがスクロールバーを作成する原因となるdivを追加できるようにしたいと思います。フロートなしでは、すでに期待どおりに機能しています。

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

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

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

4

3 に答える 3

28

フロートを使用したくない場合は、次inline-blockのように試してみてください。

#chatWindow {
   text-align: right;
}

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

JsBin (Fx20 でテスト済み): http://jsbin.com/awimev/2/edit

于 2013-04-29T12:03:14.050 に答える
7

ユーザーメッセージで使用して、各メッセージの後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;
}
于 2013-04-29T12:04:51.730 に答える
0

それまではずっと問題でした。使用するだけです

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

親メンバー内のすべて。

于 2018-02-16T09:19:53.733 に答える