前军教程网

使用场景：

接到任务，需要在WEB 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退货情况；右侧不变，仍然显示平台订单情况。要实现的表格如下：

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

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

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

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