没有浮动的右侧对齐

我有一个聊天部件，我正在添加一些样式。不过，我很难将“用户”聊天气泡排列在屏幕的右侧。没有浮动的右侧对齐

当我使用浮动权利，与浮动左（另一侧）的div不再正确定位，因为他们似乎只是在右边的相对股利。

我希望它能够附加div，这会导致overflow-y创建一个滚动条。没有浮子的工作已经按预期工作。

下面是jsbin中的当前版本。

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

TLDR;试图让.chat-bubble-user divs在没有浮动的情况下与屏幕右侧对齐。

来源

2013-04-29 zmanc

如果你不想使用花车，只是尝试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-29 12:03:14 fcalderan

非常棒。谢谢！ – zmanc 2013-04-29 12:48:23

'inline-block'会导致元素被视为文本。因此，字符之间的间隔被添加，就好像整个元素只是普通文本一样。如果你的布局需要像素完美定位，这是不可行的。 – Kafoso 2015-02-18 17:30:00

您可以使用用户的消息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-29 12:04:51 martincarlin87

-2

您可以使用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>

来源

2016-11-14 12:03:39 DarKalimHero

你真的看过问题标题吗？ – TEXHIK 2017-06-05 12:27:08

**没有浮动** – Masoud 2017-06-05 14:05:25

-1

它一直是一个问题了一段时间，直到。你只需要使用

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

所有父成员;

来源

2018-02-16 09:19:53

没有浮动的右侧对齐

回答

相关问题