京东6.18大促主会场领京享红包更优惠

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 6531|回复: 0

css下div下同行多元素右对齐

[复制链接]

21

主题

0

回帖

10

积分

新手上路

积分
10
发表于 2020-9-22 00:46:28 | 显示全部楼层 |阅读模式 来自 中国
方法一:
6 s3 L3 M. K: P. @5 J4 a2 X4 Yfloat:right; g1 K# x* P- b% ?
此外,浮动还会使得布局更紧凑(没空隙)
  1. [align=right]        hello
  2.         hi
  3. [/align]
复制代码
效果图如下:
$ ~: T7 H" I  k( [7 o2 g+ D3 a" O
5 y/ Q& q- j; C7 m% @
方法二:
! V2 v$ V, d- j1 n1 h3 g
- s4 y5 `5 D2 w: a6 \0 ~
display:inline-block+text-align:right
+ P, Y- I9 z4 Z9 ntext-align:right影响的是其下的行内元素或文字,所以inline-block使得div具有了行内元素的特性,可以右对齐
  1. [align=right]        hello
  2.         hi
  3. [/align]
复制代码
效果图如下:
  K! g* V% u; ]6 d; B
* X3 O/ i7 E# \6 F+ r8 l% M
从上面两个方法来看:  K3 ~6 ]9 W- ], |1 l6 I! q

3 n. R9 S- Y8 ]  Qfloat的布局更为紧凑一些;4 S: W4 H, `( K2 u! A
float:right会改变顺序,而text-align:right不会;
, X0 O' h+ }2 k+ U# ]text-align同时会影响其下元素的文字对齐方式;
9 v1 X2 I1 ?/ d9 f/ G2 _所以,综合两个方法,可以得到如下组合:
  1. [align=right]        hello
  2.         hi
  3. [/align]
复制代码
效果如下:+ c$ I% Q) p0 \: a7 B5 N
+ b7 f+ J+ e6 t# w+ ^: c4 `
进一步发现,综合之后:6 m7 o2 f& Y0 F  Q6 t/ T9 I
布局更为紧凑;2 h/ H7 u7 r5 o. O
float和inline-block同行时,并不会产生覆盖浮动的现象,只是会各自规矩地排列着。
2 O8 H2 ?' h! E; X. U# `1 J( p% x 到此这篇关于css下div下同行多元素右对齐的文章就介绍到这了,更多相关div同行多元素右对齐内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
# `5 Y+ H- R) |  z' U5 J6 b& ~7 ]
- D1 l, H5 v/ P4 c& ?来源:http://www.jb51.net/css/743775.html
4 W3 f5 h% m3 P- \$ n免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

帖子地址: 

梦想之都-俊月星空 优酷自频道欢迎您 http://i.youku.com/zhaojun917
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|梦想之都-俊月星空 ( 粤ICP备18056059号 )|网站地图

GMT+8, 2025-12-20 18:12 , Processed in 0.049998 second(s), 23 queries .

Powered by Mxzdjyxk! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表