未加星标

Right Side align without float

字体大小 | |
[系统(linux) 所属分类 系统(linux) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

I have a chat widget that I am adding some styling to. However I am having difficulty making the "user" chat bubbles align to the right of the screen.

When I use float right, with float left(for the other side) the divs no longer position correctly, in that they seem to just go to the right of the relative divs.

I would like it to also be able to append div's that will cause the overflow-y to create a scroll bar. Which without the float is already working as expected.

Below is the current version in a jsbin.

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

TLDR; trying to get the .chat-bubble-user divs to align to right of screen without float.

Problem courtesy of: zmanc

Solution

if you don't want use floats, just try with inline-block , like so:

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

JsBin (tested on Fx20): http://jsbin.com/awimev/2/edit

Solution courtesy of: fcalderan

Discussion

You can use overflow: auto; to keep your containing div's ratio. And use a fixed height to allow the overflow-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>

Discussion courtesy of: DarKalimHero

You can use float:right on the user messages and put a clearfix div after each one:

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; }

Discussion courtesy of: martincarlin87

This recipe can be found in it's original form on Stack Over Flow .

本文系统(linux)相关术语:linux系统 鸟哥的linux私房菜 linux命令大全 linux操作系统

tags: lt,gt,div,chat,bubble,right,non,user,float,class,clearfix
分页:12
转载请注明
本文标题:Right Side align without float
本站链接:https://www.codesec.net/view/597106.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 系统(linux) | 评论(0) | 阅读(48)