得到元素display的值_CSS实现元素⽔平居右如何实现下图所⽰的元素居右效果？
⽹上有很多关于元素⽔平居中、垂直居中的⽂章，却少有⽔平居右或者垂直居底的⽅法。
但是在实际⼯作中，元素右对齐以及居底的需求也并不少。
这篇⽂章就讲讲如何实现元素的⽔平居右。
内联元素
内联元素的右对齐很简单，只需要在其⽗元素上添加 text-align: right; 即可。
不过值得注意的是， text-align: right; 对于内联块级元素，⽐如 img 等同样适⽤。
代码：
.out {    background-color: cornsilk;    text-align: right;}.in {    width: 100px;    height: 100px;}
效果：
text-align 实现 inline-block 元素右对齐
块级元素
块级元素的⽔平居右⽅式就有好⼏种了。
⽅式⼀：右浮动
⼤家之所以没太关注块级元素⽔平居右，应该很⼤程度上也是因为浮动，以为⼀⾏ float: right; 便能搞定。
但浮动会造成⽗元素⾼度的坍塌，所以在使⽤ float 属性时，往往我们还需要清楚浮动带来的副作⽤。
⽅式⼆：绝对定位
给元素设置 postion: absolute; right: 0; 也可以实现⽔平居右，但由于绝对定位，元素脱离了标准⽂档流。
为了避免给后⾯元素的位置造成影响，往往还添加⼀个相对定位的⽗元素，并且⽗元素需要知道⼦元素的⾼度。
代码：
通过 postion 属性实现：
.demo {    width: 600px;    margin: 0 auto;}.box2 {    background-color: bisque;}.item {    width: 100px;    height: 100px;    margin-bottom: 10px;}.item:last-ch ⽅式三：flex 布局
以前需要掌握各种技巧才能实现的复杂布局，通过 flex 都可以轻松实现，所以元素⽔平居右这种需求，对于 flex 来说也是⼩菜⼀碟。
代码：
通过 flex 布局实现：
.demo {    width: 600px;    margin: 0 auto;}.box1 {    display: flex;    flex-direction: column;    background-color: bisque;}.item {    width: 100px;    height: 100效果：
flex 布局实现元素右对齐
⽅式四：margin 与 auto
flex布局对齐方式很多⼈天天都在使⽤ margin: 0 auto; 来实现块级元素居中，但却不知道 auto 这个值在 margin 属性中的具体表现。
我们将块级元素的某⼀个⽔平⽅向的 margin 值设置为 auto，那么它就会⾃动填充剩余空间。
如果两个⽔平⽅向的 margin 值都为 auto，那么元素就会居中。
代码：
通过 margin 属性实现：
.demo {    width: 600px;    margin: 0 auto;}.box2 {    background-color: bisque;}.item {    display: block;    width: 100px;    height: 100px;    margin-bottom: 1效果：
margin 与 auto 实现元素右对齐
总结
⽅式⼀和⽅式⼆虽然都能实现元素⽔平居右，但都需要更多的代码去处理其副作⽤。⽽ flex 布局和 margin + auto 的⽅式则更显完美。
在需求⽐较简单时，推荐使⽤ margin-left: auto; 的⽅式，⼀⾏代码搞定。
布局要求复杂时，那么更强⼤的 flex 布局则是最佳选择。
⾄于更强⼤的 grid 布局，由于⼀些⽼版本的360浏览器、qq浏览器等，⽀持并不是很完善，⽤户数⼜较⼤，所以暂时不做介绍。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。