CN102243633A - 网页布局的方法及装置 - Google Patents

Abstract

本发明公开了一种网页布局的方法及装置，属于互联网领域。所述方法包括：计算显示面板的实际宽度，并根据显示面板的实际宽度以及每个子面板被设置的相对百分比计算每个子面板的实际宽度；对每个子面板的实际宽度进行下取整，并根据所有子面板的取整结果，计算显示面板的剩余实际宽度；根据预设规则将显示面板的剩余实际宽度分配给一至多个子面板，并按分配后确定的布局结果设置各个子面板的宽度属性。本发明通过对计算的每个子面板的实际宽度进行下取整，并将根据取整结果得到的显示面板的剩余实际宽度分配给一至多个子面板，使网页布局可根据显示面板的实际大小变化而变化，具有提高网页布局的美观性，并兼容各种浏览器的效果。

Description

网页布局的方法及装置

技术领域

本发明涉及互联网领域，特别涉及一种网页布局的方法及装置。

背景技术

在Web***中，通常使用div标签将显示HTML(HyperText Mark-up Language，超文本标记语言或超文本链接标示语言)元素的显示面板分成多列子面板，每个子面板显示部分HTML元素，且相对显示面板存在一个相对百分比。在进行网页布局时，大多数浏览器以显示面板的实际宽度乘以每个子面板的相对百分比得到每个子面板的实际宽度，该种方式计算出的子面板的实际宽度可能带有小数，但由于HTML元素在显示时的实际宽度应为整数，因此需要对计算得出的小数进行处理。

现有技术在网页布局过程中处理上述计算得出的小数时，采用四舍五入的方式，或直接对计算的每个子面板的实际宽度进行取整(舍去小数部分)。

在实现本发明的过程中，发明人发现现有技术至少存在以下缺点：

四舍五入和取整的方式，将导致子面板的实际宽度之和小于或超出显示面板的实际宽度，进而影响布局的美观；另外，通过上述处理小数的方式进行网页布局时，如果不同浏览器适用的处理小数的方式也不同，则现有技术提供的网页布局方式无法兼容各种浏览器。

发明内容

为了提高网页布局的美观性，提供一种兼容各种浏览器的网页布局方式，本发明实施例提供了一种网页布局的方法及装置。所述技术方案如下：

一方面，提供了一种网页布局的方法，所述方法包括：

计算显示面板的实际宽度，并根据所述显示面板的实际宽度以及每个子面板被设置的相对百分比计算所述每个子面板的实际宽度；

对所述每个子面板的实际宽度进行下取整，并根据所有子面板的取整结果，计算所述显示面板的剩余实际宽度；

根据预设规则将所述显示面板的剩余实际宽度分配给一至多个子面板，并按分配后确定的布局结果设置各个子面板的宽度属性。

另一方面，提供了一种网页布局的装置，所述装置包括：

第一计算模块，用于计算显示面板的实际宽度；

第二计算模块，用于根据所述第一计算模块计算的显示面板的实际宽度以及每个子面板被设置的相对百分比计算所述每个子面板的实际宽度；

取整模块，用于对所述第二计算模块计算的每个子面板的实际宽度进行下取整；

第三计算模块，用于根据所述取整模块对所有子面板的取整结果，计算所述显示面板的剩余实际宽度；

分配模块，用于根据预设规则将所述第三计算模块计算得到的所述显示面板的剩余实际宽度分配给一至多个子面板；

设置模块，用于按照所述分配模块分配后确定的布局结果设置各个子面板的宽度属性。

本发明实施例提供的技术方案的有益效果是：

通过对计算的每个子面板的实际宽度进行下取整，并将根据取整结果得到的显示面板的剩余实际宽度分配给一至多个子面板，使网页布局可根据显示面板的实际大小变化而变化，从而可以提高网页布局的美观性，并兼容各种浏览器。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例一提供的网页布局的方法流程图；

图2是本发明实施例二提供的网页布局的方法流程图；

图3是本发明实施例二提供的子面板的相对宽度示意图；

图4是本发明实施例三提供的网页布局的装置结构示意图；

图5是本发明实施例三提供的另一种网页布局的装置结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

实施例一

参见图1，本实施例提供了一种网页布局的方法，该方法流程具体如下：

101：计算显示面板的实际宽度，并根据显示面板的实际宽度以及每个子面板被设置的相对百分比计算每个子面板的实际宽度；

102：对每个子面板的实际宽度进行下取整，并根据所有子面板的取整结果，计算显示面板的剩余实际宽度；

103：根据预设规则将显示面板的剩余实际宽度分配给一至多个子面板，并按分配后确定的布局结果设置各个子面板的宽度属性。

其中，根据所有子面板的取整结果，计算显示面板的剩余实际宽度，具体包括：

计算经下取整后的所有子面板的整数实际宽度之和，并根据所有子面板的整数实际宽度之和与显示面板的实际宽度，计算得到显示面板的剩余实际宽度。

进一步地，对每个子面板的实际宽度进行下取整之后，还包括：

将对所述每个子面板的实际宽度进行下取整后舍去的各个小数及所述各个小数与子面板的对应关系进行存储。

具体地，根据预设规则将显示面板的剩余实际宽度分配给一至多个子面板，具体包括：

根据舍去的各个小数与子面板的对应关系，以及舍去的各个小数的排列顺序，将显示面板的剩余实际宽度分配给一至多个子面板。

本实施例提供的方法，通过对计算的每个子面板的实际宽度进行下取整，并将根据取整结果得到的显示面板的剩余实际宽度分配给一至多个子面板，使网页布局可根据显示面板的实际大小变化而变化，从而可以提高网页布局的美观性，并且兼容各种浏览器。

实施例二

本实施例提供了一种网页布局的方法，该方法在对计算的每个子面板的实际宽度进行下取整后，将取整后的所有小数之和作为显示面板的剩余实际宽度，并将该显示面板的剩余实际宽度分配给一至多个子面板，使网页布局可根据显示面板的实际大小变化而变化，不仅可以提高网页布局的美观性，还可以使所有浏览器对取整后的小数可以采用相同的处理方式，进而可以解决现有技术使用相对百分比进行网页布局无法兼容各种浏览器的问题。参见图2，该方法流程具体如下：

201：计算显示面板的实际宽度，并根据显示面板的实际宽度以及每个子面板被设置的相对百分比计算每个子面板的实际宽度；

其中，本实施例不对如何计算显示面板的实际宽度进行具体限定，浏览器不同，显示面板的实际宽度也将不同。显示面板的实际宽度，以及每个HTML元素显示在显示面板上的宽度均以像素为单位，而对于每个子面板被设置的相对百分比，由于是使用div标签已经分割好的，因此，对于同一个HTML元素，每个子面板被设置的相对百分比是固定的。但由于显示面板的实际宽度不同，根据显示面板的实际宽度以及每个子面板被设置的相对百分比计算的每个子面板的实际宽度并不是固定的。对于子面板的个数及具体的相对百分比，本实施例不做具体限定，实际应用过程中，可由具体的HTML元素决定。

为了便于说明，本实施例以显示面板的实际宽度为1024个像素，子面板的个数为3，这3个子面板分别为子面板A、子面板B和子面板C，各个子面板对应的相对百分比分别为显示面板的32％、53％和15％为例进行说明，如图3所示。计算子面板的实际宽度时，子面板的实际宽度为显示面板的实际宽度与子面板的相对百分比的乘积，则子面板A的实际宽度为1024*32％＝327.68个像素；子面板B的实际宽度为1024*53％＝542.72个像素；而子面板C的实际宽度为1024*15％＝153.60个像素。

202：对每个子面板的实际宽度进行下取整，得到所有子面板的取整结果；

针对该步骤，基于上述步骤201计算得到的每个子面板的实际宽度，在对每个子面板的实际宽度进行下取整之后，子面板A的整数实际宽度为327个像素，子面板B的整数实际宽度为542个像素，子面板C的整数实际宽度为153个像素。

203：根据所有子面板的取整结果计算显示面板的剩余实际宽度；

其中，显示面板的剩余实际宽度为所有子面板的整数实际宽度之和与显示面板的实际宽度之间的差，则根据所有子面板的取整结果计算显示面板的剩余实际宽度时，具体包括：

计算经下取整后的所有子面板的整数实际宽度之和，并根据所有子面板的整数实际宽度之和与显示面板的实际宽度，计算得到显示面板的剩余实际宽度。

例如，基于上述步骤202得到的各个子面板的整数实际宽度，所有子面板的整数实际宽度之和为327+542+153＝1022个像素，则显示面板的剩余实际宽度为1024-1022＝2个像素。由上述计算结果可以看出，所有子面板的整数实际宽度之和与显示面板的实际宽度之间的差，即为对每个子面板的实际宽度进行下取整后舍去的所有小数之和，则该显示面板的剩余实际宽度也可以通过0.68+0.72+0.60＝2得到。另外，由该步骤可以得出，显示面板的剩余实际宽度同样为整数，且该显示面板的剩余实际宽度对应的整数小于子面板的个数。

204：根据预设规则将显示面板的剩余实际宽度分配给一至多个子面板，并按分配后确定的布局结果设置各个子面板的宽度属性。

具体地，本实施例不对具体的预设规则进行限定，可以将显示面板的剩余实际宽度分配给任意的一至多个子面板。但为了充分利用显示面板，使网页布局更加美观，本实施例提供的方法在根据预设规则将显示面板的剩余实际宽度分配给一至多个子面板时，提供了如下优选步骤：

根据对每个子面板的实际宽度进行下取整后舍去的各个小数与子面板的对应关系，以及舍去的各个小数的排列顺序，将显示面板的剩余实际宽度分配给一至多个子面板。

其中，在将显示面板的剩余实际宽度分配给一至多个子面板时，可以将该显示面板的剩余实际宽度按照宽度单位进行分配。也就是说，如果显示面板的剩余绝对宽度为N个宽度单位，则需要将该显示面板的剩余实际宽度N分配给排序在前N位的小数对应的子面板，且每个子面板被分配的宽度为一个宽度单位。以上述步骤203计算得到的显示面板的剩余实际宽度为2个像素为例，舍去的小数0.68、0.72和0.60分别对应子面板A、子面板B和子面板C，如果按照舍去的小数从大到小的排列顺序进行分配，则需要将这2个像素宽度分配给排序在前两位的小数0.72和0.68对应的子面板B和子面板A。

需要说明的是，由于步骤204提供的优选步骤用到了对每个子面板的实际宽度进行下取整后舍去的小数，因此，在上述步骤203对每个子面板的实际宽度进行下取整之后，还需要将舍去的各个小数及各个小数与子面板的对应关系进行存储，并在需要时，将各个小数进行排序，本实施例不对排序规则进行限定，可以按照从大到小的顺序排序，也可以按照从小到大的顺序排序。

本实施例提供的方法，通过对计算的每个子面板的实际宽度进行下取整，并将根据取整结果得到的显示面板的剩余实际宽度分配给一至多个子面板，使网页布局可根据显示面板的实际大小变化而变化，从而可以提高网页布局的美观性，并且兼容各种浏览器。

实施例三

参见图4，本实施例提供了一种网页布局的装置，该装置包括：

第一计算模块401，用于计算显示面板的实际宽度；

第二计算模块402，用于根据第一计算模块401计算的显示面板的实际宽度以及每个子面板被设置的相对百分比计算每个子面板的实际宽度；

取整模块403，用于对第二计算模块402计算的每个子面板的实际宽度进行下取整；

第三计算模块404，用于根据取整模块403对所有子面板的取整结果，计算显示面板的剩余实际宽度；

分配模块405，用于根据预设规则将第三计算模块404计算得到的显示面板的剩余实际宽度分配给一至多个子面板；

设置模块406，用于按照分配模块405分配后确定的布局结果设置各个子面板的宽度属性。

其中，第三计算模块404，具体用于计算经取整模块403进行下取整后的所有子面板的整数实际宽度之和，根据所有子面板的整数实际宽度之和与显示面板的实际宽度，计算得到显示面板的剩余实际宽度。

参见图5，进一步地，该网页布局的装置还包括：

存储模块407，用于在取整模块403对每个子面板的实际宽度进行下取整之后，将舍去的各个小数及各个小数与子面板的对应关系进行存储。

具体地，分配模块405，具体用于根据舍去的各个小数与子面板的对应关系，以及舍去的各个小数的排列顺序，将显示面板的剩余实际宽度分配给一至多个子面板。

综上所述，本实施例提供的装置，通过对计算的每个子面板的实际宽度进行下取整，并将根据取整结果得到的显示面板的剩余实际宽度分配给一至多个子面板，使网页布局可根据显示面板的实际大小变化而变化，从而可以提高网页布局的美观性，并且兼容各种浏览器。

需要说明的是：上述实施例提供的网页布局的装置在进行网页布局时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的网页布局的装置与网页布局的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

本发明实施例中的全部或部分步骤，可以利用软件实现，相应的软件程序可以存储在可读取的存储介质中，如光盘或硬盘等。

以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种网页布局的方法，其特征在于，所述方法包括：

计算显示面板的实际宽度，并根据所述显示面板的实际宽度以及每个子面板被设置的相对百分比计算所述每个子面板的实际宽度；

对所述每个子面板的实际宽度进行下取整，并根据所有子面板的取整结果，计算所述显示面板的剩余实际宽度；

根据预设规则将所述显示面板的剩余实际宽度分配给一至多个子面板，并按分配后确定的布局结果设置各个子面板的宽度属性。

2.根据权利要求1所述的方法，其特征在于，所述根据所有子面板的取整结果，计算所述显示面板的剩余实际宽度，具体包括：

计算经下取整后的所有子面板的整数实际宽度之和，并根据所述所有子面板的整数实际宽度之和与所述显示面板的实际宽度，计算得到所述显示面板的剩余实际宽度。

3.根据权利要求1所述的方法，其特征在于，所述对所述每个子面板的实际宽度进行下取整之后，还包括：

将对所述每个子面板的实际宽度进行下取整后舍去的各个小数及所述各个小数与子面板的对应关系进行存储。

4.根据权利要求3所述的方法，其特征在于，所述根据预设规则将所述显示面板的剩余实际宽度分配给一至多个子面板，具体包括：

根据舍去的各个小数与子面板的对应关系，以及所述舍去的各个小数的排列顺序，将所述显示面板的剩余实际宽度分配给一至多个子面板。

5.一种网页布局的装置，其特征在于，所述装置包括：

第一计算模块，用于计算显示面板的实际宽度；

第二计算模块，用于根据所述第一计算模块计算的显示面板的实际宽度以及每个子面板被设置的相对百分比计算所述每个子面板的实际宽度；

取整模块，用于对所述第二计算模块计算的每个子面板的实际宽度进行下取整；

第三计算模块，用于根据所述取整模块对所有子面板的取整结果，计算所述显示面板的剩余实际宽度；

分配模块，用于根据预设规则将所述第三计算模块计算得到的所述显示面板的剩余实际宽度分配给一至多个子面板；

设置模块，用于按照所述分配模块分配后确定的布局结果设置各个子面板的宽度属性。

6.根据权利要求5所述的装置，其特征在于，所述第三计算模块，具体用于计算经所述取整模块进行下取整后的所有子面板的整数实际宽度之和，根据所述所有子面板的整数实际宽度之和与所述显示面板的实际宽度，计算得到所述显示面板的剩余实际宽度。

7.根据权利要求5所述的装置，其特征在于，所述装置，还包括：

存储模块，用于在所述取整模块对所述每个子面板的实际宽度进行下取整之后，将舍去的各个小数及所述各个小数与子面板的对应关系进行存储。

8.根据权利要求7所述的装置，其特征在于，所述分配模块，具体用于根据舍去的各个小数与子面板的对应关系，以及所述舍去的各个小数的排列顺序，将所述显示面板的剩余实际宽度分配给一至多个子面板。

Images