html中将文字放在左右两边,html怎么把字放在最中间

首页 > 实用技巧 > 作者:YD1662023-04-28 18:14:48

使用场景:

接到任务,需要在WEB ERP系统上,实现一个核对平台与ERP订单数量的问题,

大概的结构是,左边是显示ERP订单数据,右边是显示平台订单数据,显示的效果如下:

ERP订单

空隙

平台订单

数据项一

数据项一

数据项二

数据项二

数据项三

数据项二

保存按钮

通过核对两边数据,进行相应的保存操作。

那么我们如何通过HTML CSS实现这样的显示呢?

首先,说CSS,要实现这样的显示,我们可以用float来处理。

我们共定义三个样式:

1)per70 表示 70%左右的宽度比例。

2)per1 表示 表示1%的空隙,宽度比例。

3)per30 表示 30%左右的宽度比例。

代码如下:

html中将文字放在左右两边,html怎么把字放在最中间(1)

这样,就可以让它把一定的比例分左右两边显示。

接着,我们写HTML,只需要用DIV加上相应的样式即可,如下图。

html中将文字放在左右两边,html怎么把字放在最中间(2)

记住:最后还要加个样式.cl_b{clear:both},把左右两侧浮动取消,这样就可以把“保存”按钮摆在两者的下面了。

以上是一个比较简单的显示。

接下来,我们再看一个稍为数据情况多一点的。这个也是实际工作中涉及的业务:

业务是这样的:我们需要在左侧显示多组数据,在右侧显示一组数据,比如,我们需要在左侧显示ERP发货情况

ERP换货情况,ERP退货情况;右侧不变,仍然显示平台订单情况。要实现的表格如下:

ERP订单

空隙

平台订单

数据项一

数据项一

ERP订单

数据项一

ERP订单

数据项一

保存按钮

要实现上面的表格也很简单:

左侧显示三组数组,右侧不变,CSS也可以不变

html中将文字放在左右两边,html怎么把字放在最中间(3)

原结构保存不变,只是把原来左侧的内容,变成三个DIV,放在per30里面即可。

好了,分享到此,大家有任何想法,都可留言,一起学习。

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.