龙空技术网

HTML+CSS实现左右两边显示,左侧显示多组数据,右侧显示一组数据

开发分享 284

前言:

如今朋友们对“html文字右”大概比较关切,小伙伴们都需要知道一些“html文字右”的相关内容。那么小编在网摘上网罗了一些有关“html文字右””的相关资讯,希望咱们能喜欢,姐妹们一起来了解一下吧!

使用场景:

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

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

ERP订单

空隙

平台订单

数据项一

数据项一

数据项二

数据项二

数据项三

数据项二

保存按钮

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

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

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

我们共定义三个样式:

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

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

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

代码如下:

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

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

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

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

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

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

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

ERP订单

空隙

平台订单

数据项一

数据项一

ERP订单

数据项一

ERP订单

数据项一

保存按钮

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

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

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

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

标签: #html文字右