一个块级元素靠右的实现方式有那些呢? 今天从别人哪里刚刚又学到了点东西, 整理了一下:

1
2
3
4
<!-- 基本结构 -->
<div id="parent">
<div id="block"></div>
</div>

使用 margin 属性

1
2
3
#block{
margin-left: auto;
}

margin-left 设为 auto 后, 元素左边的 margin 会被尽可能的撑大, 所以自然就把元素挤到右边去了.

使用 position 属性

1
2
3
4
5
6
7
#parent{
position: relative;
}
#block{
position: absolute;
right: 0;
}

使用定位, 绝对能把元素放到右边去.

使用 float 属性

1
2
3
#block{
float: right;
}

使用浮动将元素浮动到右边.

使用 text-align 属性

1
2
3
4
5
6
#parent{
text-align: right;
}
#block{
display: inline-block;
}

将块设为行内元素,然后父元素使用 text-align: right; 是块到右边.

使用 flex 属性

1
2
3
4
#parent{
display: flex;
justify-content: flex-end;
}

将父元素变为弹性容器, 然后将 justify-content 设为 flex-end, 那么容器中的弹性元素会从右开始排列.

以上就是我整理块级元素靠右排列的几种方式, 如有遗漏, 欢迎补充.