css下div下同行多元素右对齐
2020-09-20 04:09
1486 查看
方法一:
float:right
此外,浮动还会使得布局更紧凑(没空隙)
<div style="background-color: red;width: 100%;height: 60px;/* text-align: right; */"> <div style="width: 30px;height: 100%;background-color: yellow;float: right;">hello</div> <div style="width: 60px;height: 100%;background-color: blue;float: right;">hi</div> </div>
效果图如下:
方法二:
display:inline-block+text-align:right
text-align:right影响的是其下的行内元素或文字,所以inline-block使得div具有了行内元素的特性,可以右对齐
<div style="background-color: red;width: 100%;height: 60px;text-align: right;"> <div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hello</div> <div style="width: 60px;height: 100%;background-color: blue;display: inline-block;">hi</div> </div>
效果图如下:
从上面两个方法来看:
float的布局更为紧凑一些;
float:right会改变顺序,而text-align:right不会;
text-align同时会影响其下元素的文字对齐方式;
所以,综合两个方法,可以得到如下组合:
<div style="background-color: red;width: 100%;height: 60px;text-align: right;"> <div style="width: 30px;height: 100%;background-color: yellow;display: inline-block;">hello</div> <div style="width: 60px;height: 100%;background-color: blue;float: right;">hi</div> </div>
效果如下:
进一步发现,综合之后:
布局更为紧凑;
float和inline-block同行时,并不会产生覆盖浮动的现象,只是会各自规矩地排列着。
到此这篇关于css下div下同行多元素右对齐的文章就介绍到这了,更多相关div同行多元素右对齐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- CSS/DIV:不用float实现块状元素/block/的同行排列
- div下同行多元素右对齐
- CSS行内(inline)元素同行放置时,垂直对齐差异
- 转:使用jQuery和CSS控制元素对齐
- 【CSS】关于div的对齐与网页布局
- CSS基础学习7-CSS设置组织元素(span和div)
- CSS横向排序_让多个div盒子并排同行显示
- css文本,元素,图像居中对齐方式
- css 实现文字自动换行切同行元素高度自适应
- css中div输入框对齐
- div+css布局必了解的列表元素ul ol li dl dt dd详解
- CSS让3个块级元素同行且中间元素居中
- CSS实现div或ul,li水平对齐不换行
- 08-DIV+CSS-块元素和行内元素
- DIV+CSS解决图片文字对齐的问题
- DIV+CSS排版时 如何解决img图片元素下多余空白
- css+div文字底部对齐
- 几个css元素的简单解释 div ul dl dt ol
- CSS中div、span和center元素
- div+css如何让一行内的文字两端对齐?