全国服务热线:4008-888-888

技术知识

cs⊙^⊙s下div下同行业多元化素右两端对齐

方式一:

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>

实际效果图以下:

从上边2个方式看来:

float的合理布局更加紧凑型一些;
float:right会更改次序,而text-align:right不容易;
text-align同时候危害其下原素的文本两端对齐方法;

因此,综合性2个方式,能够获得以下组成:

<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同行业多元化素右两端对齐內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服