CN109739501A - 在绝对定位布局中实现流式效果的方法、装置及电子设备 - Google Patents

Abstract

本发明实施例公开了一种在绝对定位布局中实现流式效果的方法、装置及电子设备。其中的方法包括：监控网页制作界面中第一元素的位置坐标；在所述第一元素的位置坐标发生变动时，计算所述第一元素与第二元素之间的间隔；判断所述间隔是否处于预置的阈值区间[a，b]内，a表示预先设定的元素之间间隔的安全阈值，b表示预先设定的元素之间间隔的最大值；若否，则移动所述第二元素，使所述第一元素和所述第二元素之间的间隔恢复至所述阈值区间内。通过本发明的实施例，在网页制作过程中，网页中的各个元素之间能够自动保持元素之间的相对位置，用户无需手动进行适应性调整，提高了网页制作效率。

Description

在绝对定位布局中实现流式效果的方法、装置及电子设备

技术领域

本发明涉及网页前端技术领域，尤其涉及一种在绝对定位布局中实现流式效果的方法、装置及电子设备。

背景技术

在网页的设计开发中，绝对定位布局为一种常见UI布局方式。但存在的问题是，当网页制作用户调整模板中一个或多个元素时，可能会导致元素之间的部分或全部被覆盖，从而导致网页布局混乱，用户不得不进行适应性调整，影响网页制作效率。

发明内容

有鉴于此，本发明实施例提供了一种在绝对定位布局中实现流式效果的方法、装置及电子设备，至少部分的解决现有技术中存在的问题。

第一方面，本发明实施例提供了一种在绝对定位布局中实现流式效果的方法，用于网页的制作，包括：

监控网页制作界面中第一元素的位置坐标；

在所述第一元素的位置坐标发生变动时，计算所述第一元素与第二元素之间的间隔；

判断所述间隔是否处于预置的阈值区间[a，b]内，a表示预先设定的元素之间间隔的安全阈值，b表示预先设定的元素之间间隔的最大值；

若否，则移动所述第二元素，使所述第一元素和所述第二元素之间的间隔恢复至所述阈值区间内。

根据本发明实施例的一种具体实现方式，若计算所得的所述第一元素与第二元素之间的间隔小于预定的安全阈值a，则向下移动所述第二元素以使所述第一元素和所述第二元素不发生交叠。

根据本发明实施例的一种具体实现方式，若计算所得的所述第一元素与第二元素之间的间隔大于预先设定的元素之间间隔的最大值b，则向上移动所述第二元素，减小所述第一元素和所述第二元素之间的间隔。

根据本发明实施例的一种具体实现方式，所述第一元素与第二元素之间的间隔小于预定的安全阈值通过以下操作之一发生：

所述第一元素的平移；或

增大所述第一元素的尺寸；或

当所述第一元素为多行文本框时，增加所述多行文本框中的文字的行数。

根据本发明实施例的一种具体实现方式，所述平移为沿浏览器可视区域滚动方向的移动。

根据本发明实施例的一种具体实现方式，所述增大所述第一元素的尺寸至少包括沿浏览器可视区域滚动方向尺寸的增加。

根据本发明实施例的一种具体实现方式，所述多行文本框中的文字的行数的增加为，沿浏览器可视区域滚动方向文字的行数的增加。

根据本发明实施例的一种具体实现方式，所述计算所述第一元素与第二元素之间的间隔包括如下步骤：

以屏幕左上角为坐标原点，根据所述第一元素的长度和高度，计算位置发生变动后的第一元素各个端点的坐标；

根据所述第二元素的各个端点坐标，计算位置发生变动后第一元素和所述第二元素之间的间隔。

根据本发明实施例的一种具体实现方式，移动所述第二元素时，若第二元素超过了制作界面的边界，则增加制作界面的高度。

第二方面，本发明实施例提供了一种在绝对定位布局中实现流式效果的装置，用于网页的制作，包括：

监控模块，用于监控网页制作界面中第一元素的位置坐标；

计算模块，用于在所述第一元素的位置坐标发生变动时，计算所述第一元素与第二元素之间的间隔；

判断模块，用于判断所述间隔是否处于预置的阈值区间[a，b]内，a表示预先设定的元素之间间隔的安全阈值，b表示预先设定的元素之间间隔的最大值；

移动模块，用于在所述间隔处于预置的阈值区间[a，b]之外时，移动所述第二元素，使所述第一元素和所述第二元素之间的间隔恢复至所述阈值区间内。

根据本发明实施例的一种具体实现方式，在移动模块中，若计算所得的所述第一元素与第二元素之间的间隔小于预定的安全阈值a，则向下移动所述第二元素以使所述第一元素和所述第二元素不发生交叠。

根据本发明实施例的一种具体实现方式，在移动模块中，若计算所得的所述第一元素与第二元素之间的间隔大于预先设定的元素之间间隔的最大值b，则向上移动所述第二元素，减小所述第一元素和所述第二元素之间的间隔。

根据本发明实施例的一种具体实现方式，所述第一元素与第二元素之间的间隔小于预定的安全阈值通过以下操作之一发生：

所述第一元素的平移；或

增大所述第一元素的尺寸；或

当所述第一元素为多行文本框时，增加所述多行文本框中的文字的行数。

根据本发明实施例的一种具体实现方式，所述平移为沿浏览器可视区域滚动方向的移动。

根据本发明实施例的一种具体实现方式，所述增大所述第一元素的尺寸至少包括沿浏览器可视区域滚动方向尺寸的增加。

根据本发明实施例的一种具体实现方式，所述多行文本框中的文字的行数的增加为，沿浏览器可视区域滚动方向文字的行数的增加。

根据本发明实施例的一种具体实现方式，所述计算模块包括：

第一计算单元，用于以屏幕左上角为坐标原点，根据所述第一元素的长度和高度，计算位置发生变动后的第一元素各个端点的坐标；

第二计算单元，用于根据所述第二元素的各个端点坐标，计算位置发生变动后第一元素和所述第二元素之间的间隔。

根据本发明实施例的一种具体实现方式，所述安全阈值a≥0。

根据本发明实施例的一种具体实现方式，移动所述第二元素时，若第二元素超过了制作界面的边界，则增加制作界面的高度。

第三方面，本发明实施例还提供了一种电子设备，该电子设备包括：

至少一个处理器；以及，

与该至少一个处理器通信连接的存储器；其中，

该存储器存储有可被该至少一个处理器执行的指令，该指令被该至少一个处理器执行，以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的在绝对定位布局中实现流式效果的方法。

第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行前述任第一方面或第一方面的任一实现方式中的在绝对定位布局中实现流式效果的方法。

第五方面，本发明实施例还提供了一种计算机程序产品，该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序，该计算机程序包括程序指令，当该程序指令被计算机执行时，使该计算机执行前述第一方面或第一方面的任一实现方式中的在绝对定位布局中实现流式效果的方法。

本发明实施例提供的绝对定位布局中实现流式效果的方法、装置及电子设备、非暂态计算机可读存储介质及计算机程序中，通过监控网页制作界面中各个元素的位置坐标，在有元素的位置坐标发生变动时，计算该元素与其相关元素之间的间隔，若该间隔小于预定的安全阈值，则移动相关元素以使元素之间不发生覆盖或者部分覆盖。本发明通过内置的程序，自动调整相关元素(尤其是相邻元素)的位置，进而保持不同元素之间不会因为某个元素的移动或尺寸变大等变动发生交叠。可以看出，通过本发明的实施例，在网页制作过程中，网页中的各个元素之间能够自动保持元素之间的相对位置，用户无需手动进行适应性调整，提高了网页制作效率。

附图说明

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

图1为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法的步骤流程图；

图2为本发明实施例中，打开制作网页应用程序后所呈现的界面的示意图；

图3为本发明实施例中，供用户所选择的多个网页模块的示意图；

图4为一个实施例中，用户所选择的其中一个网页模块后，默认模板和备选模板所形成的应用程序的制作界面的示意图；

图5为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，计算两个元素之间的间隔的步骤流程图；

图6A为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，元素纵向平移操作所导致的元素之间的交叠的示意图；

图6B为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，元素水平平移操作所导致的元素之间的交叠的示意图；

图7为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，元素尺寸增大操作所导致的元素之间的交叠的示意图；

图8为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，增加多行文本框中的文字的行数所导致的元素之间的交叠的示意图；

图9为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，元素纵向平移操作导致的元素之间发生交叠时，第二元素移动的示意图；

图10为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，元素尺寸增大操作所导致的元素之间的交叠时，第二元素移动的示意图；

图11为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，增加多行文本框中的文字的行数所导致的元素之间的交叠时，第二元素移动的示意图；

图12为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法中，元素尺寸变小操作所导致的元素之间间隔增加的示意图；

图13为本发明实施例提供的在绝对定位布局中实现流式效果的装置的结构框图；

图14为本发明实施例提供的在绝对定位布局中实现流式效果的装置中，计算模块的结构框图；

图15为本发明实施例提供的电子设备的结构框图。

具体实施方式

下面结合附图对本发明实施例进行详细描述。

以下通过特定的具体实例说明本公开的实施方式，本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然，所描述的实施例仅仅是本公开一部分实施例，而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用，本说明书中的各项细节也可以基于不同观点与应用，在没有背离本公开的精神下进行各种修饰或改变。需说明的是，在不冲突的情况下，以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。

需要说明的是，下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见，本文中所描述的方面可体现于广泛多种形式中，且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开，所属领域的技术人员应了解，本文中所描述的一个方面可与任何其它方面独立地实施，且可以各种方式组合这些方面中的两者或两者以上。举例来说，可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外，可使用除了本文中所阐述的方面中的一或多者之外的其它结构及/或功能性实施此设备及/或实践此方法。

还需要说明的是，以下实施例中所提供的图示仅以示意方式说明本公开的基本构想，图式中仅显示与本公开中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制，其实际实施时各组件的型态、数量及比例可为一种随意的改变，且其组件布局型态也可能更为复杂。

另外，在以下描述中，提供具体细节是为了便于透彻理解实例。然而，所属领域的技术人员将理解，可在没有这些特定细节的情况下实践所述方面。

本公开实施例提供一种在绝对定位布局中实现流式效果的方法。本实施例提供的在绝对定位布局中实现流式效果的方法可以由一计算装置来执行，该计算装置可以实现为软件，或者实现为软件和硬件的组合，该计算装置可以集成设置在服务器、终端设备等中。

本发明实施例一种在绝对定位布局中实现流式效果的方法，用于网页的制作，包括如下步骤：

i)监控网页制作界面中第一元素的位置坐标；

ii)在所述第一元素的位置坐标发生变动时，计算所述第一元素与第二元素之间的间隔；

iii)判断所述间隔是否处于预置的阈值区间[a，b]内，a表示预先设定的元素之间间隔的安全阈值，b表示预先设定的元素之间间隔的最大值。一般来说，a≥0，b为符合视觉效果的的经验取值。

iv)若否，则移动所述第二元素，使所述第一元素和所述第二元素之间的间隔恢复至所述阈值区间内。

下面说明书的描述中，会从两个方面说明本发明的各个实施例，第一方面的应用场景为，由于某一个元素坐标位置的变动，导致该元素和与其相关的元素产生“交叠”；第二方面的应用场景为，由于某一个元素的坐标位置的变动，导致与其相关的元素之间的间隔变大，这种变大可能会影响网页在视觉上的体验，或产生其他问题。

图1为本发明实施例提供的一种在绝对定位布局中实现流式效果的方法的步骤流程图，该方法实施例用于网页的制作，包括如下步骤：

S101，监控网页制作界面中第一元素的位置坐标。

本实施例中的网页制作界面，是说制作网页的应用程序所呈现的界面。

用户制作网页时，通常打开某一制作网页的应用程序。举例来说，打开制作网页应用程序，呈现的如图2所示的界面，该界面为构建培训学校的网页时，供用户(开发网页的程序员或培训学校)所选择的多个网页模块的示意图，例如，可以包括如下八个网网页模块，分别为：

网页模块1-办学宗旨，

网页模块2-特色优势，

网页模块3-课程介绍，

网页模块4-师资力量，

网页模块5-品牌背书，

网页模块6-痛点问题，

网页模块7-招生说明，以及

网页模块8-其他问题。

用户根据需求和意愿，在所呈现的多个网页模块中，选择所需的网页模块，可以为多个，当然也可以为一个。例如，用户在制作网页时，根据需要，选择网页模块1、网页模块2、网页模块3、网页模块4和网页模块7，参照图3。

接下来，用户开始编辑某一具体模块。例如，参照图4，用户开始编辑网页模块1-办学宗旨，其对应的模板参照图包括一个默认模板A和三个备选模板，分别为备选模板B1、备选模板B2、备选模板B3。

若用户选择默认模板A进行编辑。

此时，默认模板A就是本实施例中的网页制作界面。

接下来，对“第一元素”进行解释和说明。

首先解释“元素”。在网页前端的开发设计中，元素是网页的组成部分，一个网页由多个元素组成。网页元素就是指网页中使用到的一切用于组织结构和表达内容的对象，比如，文本、图像、动画、超级链接等。

这里的第一元素，可以解释为网页中的任何一个元素。如上所述，可以为文本、可以为图像，也可以为动画或者超链接。“第一”并非是做限定，其是为了与后面提到的“第二元素”做区别，表明这是两个不同的元素。

本实施例中，网页中的元素的位置坐标采用的是绝对定位的方式确定。这里的绝对定位通常为，被绝对定位的元素，可以以浏览器的左上角为坐标原点。当然，也可以采用其他位置作为坐标原点，本发明对此不做限定。

在监控网页制作界面中第一元素的位置坐标时，可以通过网页中已有元素的坐标位置的改变来判断。在本实施例中，在用户打开应用程序后，选定模板，选定制作界面后，就会调取模板中各个元素的左上角的横、纵坐标及其元素的长度和高度。本实施例中的监控元素的位置坐标，可以通过监控元素所对应的框的左上角的坐标的变动作为依据的。

S102，在第一元素的位置坐标发生变动时，计算第一元素与第二元素之间的间隔。

如上所述，若第一元素左上角的横纵坐标值发生变动，则要考虑与该第一元素相关的其他元素(也就是，“第二元素”)是否因为第一元素坐标的变动，而在第一元素和第二元素之间发生“层叠”，比如，覆盖或者被覆盖。为避免发生覆盖，主要依据是第一元素的坐标位置发生变动后，两个元素之间的间隔。

关于第二元素，如上所示，“第一”和“第二”并非网页中特定的某个元素，仅仅是为了区别二者不是相同的元素。第一元素为网页开发的应用程序中当前制作界面中的任何一个元素，第二元素也可以这样理解，但鉴于考虑的是二者发生层叠，所以，第二元素更大的可能是与第一元素相邻的元素，这里的相邻，尤其是指在第一元素下方的元素，在手机等移动终端的网页的开发中更是如此。当然，第二元素除了与第一元素为相邻关系外，也可以为虽然不相邻，但间隔也比较近的元素。

至于两个元素之间的间隔，在一个实施例中，可以通过如下步骤确定，参照图5，包括如下步骤：

S1021，以屏幕左上角为坐标原点，根据第一元素的长度和高度，计算位置发生变动后的第一元素各个端点的坐标；

S1022，根据第一元素和第二元素的各个端点坐标，计算第一元素和所述第二元素之间的间隔。

需要说明的是，坐标原点的选择可以为屏幕左上角，也可以是其他位置，本发明对此不做限定。

在具体地实施例中，第一元素的位置坐标发生变动是通过如下方式发生：

第一元素的平移，或增大所述第一元素的尺寸，或当所述第一元素为多行文本框时，增加所述多行文本框中的文字的行数。

下面分别进行说明。

1)元素的平移

平移操作为元素网页制作过程中比较常见的操作，一般是通过用户拖动鼠标实现。在一个实施例中，对于移动终端上应用网页制作程序时，平移的方向可以为沿浏览器可视区域滚动方向的移动，可以理解为“纵向”。当然，本发明对此不做限定，元素水平方向的平移所导致的元素之间的交叠也是本发明能够解决的技术问题。

参照图6A所示。图6A为一个实施例中，元素纵向平移操作所导致的元素之间的交叠的示意图。第一元素E的左上角的坐标为O，向下平移后，第一元素E的左上角的坐标为O₁。从图6A可以看出，由于第一元素E向下平移导致第一元素E和第二元素F之间发生交叠。

参照图6B所示。图6B为一个实施例中，元素水平平移操作所导致的元素之间的交叠的示意图。第一元素E的左上角的坐标为O，向右平移后，第一元素E的左上角的坐标为O₁。从图6B可以看出，由于第一元素E向右平移导致第一元素E和第二元素F之间发生交叠。

2)增大第一元素的尺寸

增大元素尺寸的操作也是元素网页制作过程中比较常见的操作，一般也是通过用户拖动鼠标实现。

在一个实施例中，对于移动终端上应用网页制作程序时，增大元素的尺寸，可以为沿浏览器可视区域滚动方向尺寸的增加，即“纵向”尺寸的增加。当然，本发明也适用于沿着垂直于纵向的横向尺寸的增加所导致的元素之间的交叠。

参照图7，图7为一个实施例中，元素尺寸增大操作所导致的元素之间的交叠的示意图。

第一元素E的左上角的坐标为O，向下拖动第一元素E，第一元素E对应的框的下边沿向下延伸，导致第一元素E和第二元素F之间发生交叠。

同理，在其他实施例中，第一元素E对应的框的右侧边沿向右水平延伸，第一元素E尺寸增加，也导致第一元素E和第二元素F之间发生交叠。

3)当所述第一元素为多行文本框时，增加所述多行文本框中的文字的行数在制作网页过程中，若多行文本框中的文字的行数的增加为，沿浏览器可视区域滚动方向文字的行数的增加。这种增加，将导致多行文本框这一元素尺寸位置的变化，很有可能会与其他元素发生交叠。

参照图8，图8为本发明实施例中，增加多行文本框中的文字的行数所导致的元素之间的交叠的示意图。可以看出，随着作为第一元素E中文本框行数的增加，导致与第二元素F发生交叠。

S103，判断间隔是否小于预定的安全阈值。

在一个实施例中，预先存储元素之间的安全阈值，这个安全阈值可以为0，也可以为其他大于0的数值，根据设计需要由开发人员选取。通过上个步骤，确定发生位置变动的第一元素和第二元素的间隔后，将这个间隔与预定的安全阈值进行比较，以及时发现是否发生层叠或者是不是将很容易发生层叠。

S104，在间隔小于预定的安全阈值时，移动第二元素以使第一元素和第二元素不发生交叠。

通过移动已经发生层叠或者将要发生层叠(或者说，更好地避免发生层叠)的元素，避免这种元素之间交叠现象的发生。

参照图9，图10和图11，分别示出了元素纵向平移操作、元素尺寸增大操作增加多行文本框中的文字的行数操作导致的元素之间发生交叠时，第二元素移动的示意图。第二元素F虚线的位置是移动后的位置。

需要说明的是，在移动所述第二元素时，若第二元素超过了制作界面的边界，则需自动增加制作界面的高度。

可以看出，在本实施例中，通过监控网页制作界面中各个元素的位置坐标，在有元素的位置坐标发生变动时，计算该元素与其相关元素之间的间隔，若该间隔小于预定的安全阈值，则移动相关元素以使元素之间不发生覆盖或者部分覆盖。本发明通过内置的程序，自动调整相关元素(尤其是相邻元素)的位置，进而保持不同元素之间不会因为某个元素的移动或尺寸变大等变动发生交叠。可以看出，通过本发明的实施例，在网页制作过程中，网页中的各个元素之间能够自动保持元素之间的相对位置，用户无需手动进行适应性调整，提高了网页制作效率。

第二方面，若第一元素尺寸变小，而计算所得的所述第一元素与第二元素之间的间隔大于预先设定的元素之间间隔的最大值，则向上移动第二元素，减小所述第一元素和所述第二元素之间的间隔。

参照图12所示。从图12可以看出，第一时刻，第一元素E和第二元素F之间的间隔为d。在第二时刻，第一元素E的尺寸变小，导致第一元素E和第二元素F之间的间隔增大至D。这种变动，可能导致网页设计整体的不美观，影响视觉效果，因此，本发明的一个实施例需要随之上调第二元素F。本发明的一个实施例采用的方法是，在第二时刻，若计算第一元素E与第二元素之间F的间隔大于预先设定的元素之间间隔的最大值d，则向上移动述第二元素，减小第一元素E和第二元素F之间的间隔。从图12的t3时刻可以看出，自动减小第一元素E和第二元素F之间的间隔后，这两个元素之间的间隔又恢复至原来的数值。

在不同的实施例中，元素之间间隔的最大值可以为第一元素与第二元素之间的初始距离，也可以是其他值，根据需要，比如，美观度设定即可。至于第一元素尺寸变小的原因，可以是由于第一元素拖拽变小，文本框行数表少、第一元素向上平移等。本发明在此不再赘述。

图13为本发明实施例提供的一种在绝对定位布局中实现流式效果的装置的结构框图，该装置实施例用于网页的制作，包括：

监控模块1301，用于监控网页制作界面中第一元素的位置坐标。

本实施例中的网页制作界面，是说制作网页的应用程序所呈现的界面。

下面，对“第一元素”进行解释和说明。

首先解释“元素”。在网页前端的开发设计中，元素是网页的组成部分，一个网页由多个元素组成。网页元素就是指网页中使用到的一切用于组织结构和表达内容的对象，比如，文本、图像、动画、超级链接等。

这里的第一元素，可以解释为网页中的任何一个元素。如上所述，可以为文本、可以为图像，也可以为动画或者超链接。“第一”并非是做限定，其是为了与后面提到的“第二元素”做区别，表明这是两个不同的元素。

本实施例中，网页中的元素的位置坐标采用的是绝对定位的方式确定。这里的绝对定位通常为，被绝对定位的元素，可以以浏览器的左上角为坐标原点当然，也可以任意指定。本发明对此不做限定。

在监控网页制作界面中第一元素的位置坐标时，可以通过网页中已有元素的坐标位置的改变来判断。在本实施例中，在用户打开应用程序后，选定模板，选定制作界面后，就会调取模板中各个元素的左上角的横、纵坐标及其元素的长度和高度。本实施例中的监控元素的位置坐标，可以通过监控元素所对应的框的左上角的坐标的变动作为依据的。

计算模块1302，用于在第一元素的位置坐标发生变动时，计算第一元素与第二元素之间的间隔。

如上所述，若第一元素左上角的横纵坐标值发生变动，则要考虑与该第一元素相关的其他元素(也就是，“第二元素”)是否因为第一元素坐标的变动，而在第一元素和第二元素之间发生“层叠”，比如，覆盖或者被覆盖。为避免发生覆盖，主要依据是第一元素的坐标位置发生变动后，两个元素之间的间隔。

关于第二元素，如上所示，“第一”和“第二”并非网页中特定的某个元素，仅仅是为了区别二者不是相同的元素。第一元素为网页开发的应用程序中当前制作界面中的任何一个元素，第二元素也可以这样理解，但鉴于考虑的是二者发生层叠，所以，第二元素更大的可能是与第一元素相邻的元素，这里的相邻，尤其是指在第一元素下方的元素，在手机等移动终端的网页的开发中更是如此。当然，第二元素除了与第一元素为相邻关系外，也可以为虽然不相邻，但间隔也比较近的元素。

至于两个元素之间的间隔，在一个实施例中，参照图13，示出了一个实施例中计算模块的结构框图，包括：

第一计算单元13021，用于以屏幕左上角为坐标原点，根据第一元素的长度和高度，计算位置发生变动后的第一元素各个端点的坐标；

第一计算单元13021，用于根据第一元素和第二元素的各个端点坐标，计算第一元素和所述第二元素之间的间隔。

需要说明的是，坐标原点的选择，可以为屏幕左上角的点，也可以是其他位置的点，本发明对此不做限定。

在具体地实施例中，第一元素的位置坐标发生变动是通过如下方式发生：

第一元素的平移，或增大所述第一元素的尺寸，或当所述第一元素为多行文本框时，增加所述多行文本框中的文字的行数。

判断模块1303，用于判断间隔是否小于预定的安全阈值。

在一个实施例中，预先存储元素之间的安全阈值，这个安全阈值可以为0，也可以为其他大于0的数值，根据设计需要由开发人员选取。通过上个步骤，确定发生位置变动的第一元素和第二元素的间隔后，将这个间隔与预定的安全阈值进行比较，以及时发现是否发生层叠或者是不是将很容易发生层叠。

移动模块，用于在间隔小于预定的安全阈值时，移动第二元素以使第一元素和第二元素不发生交叠。

通过移动已经发生层叠或者将要发生层叠(或者说，更好地避免发生层叠)的元素，避免这种元素之间交叠现象的发生。

在移动第二元素时，若第二元素超过了制作界面的边界，则需自动增加制作界面的高度。

当然，需要说明的是，在移动第二元素时，如果导致第二元素与其他元素的间距小于安全阈值，按照同样方式进行递归计算。

需要说明的是，上述实施例在绝对定位布局中实现流式效果的装置与方法实施例原理相似，相关之处参照上述说明即可，本发明在此不再赘述。

图15示出了本发明实施例提供的电子设备150的结构示意图，电子设备150包括至少一个处理器1501(例如CPU)，至少一个输入输出接口1504，存储器1502，和至少一个通信总线1503，用于实现这些部件之间的连接通信。至少一个处理器1501用于执行存储器1502中存储的计算机指令，以使所述至少一个处理器1501能够执行前述任一分表方法的实施例。存储器1502为非暂态存储器(non-transitory memory)，其可以包含易失性存储器，例如高速随机存取存储器(RAM：Random Access Memory)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。通过至少一个输入输出接口1504(可以是有线或者无线通信接口)实现与至少一个其他设备或单元之间的通信连接。

在一些实施方式中，存储器1502存储了程序15021，处理器1501执行程序15021，用于执行前述任一分表方法实施例中的内容。

该电子设备可以以多种形式存在，包括但不限于：

(1)移动通信设备：这类设备的特点是具备移动通信功能，并且以提供话音、数据通信为主要目标。这类终端包括：智能手机(例如iPhone)、多媒体手机、功能性手机，以及低端手机等。

(2)超移动个人计算机设备：这类设备属于个人计算机的范畴，有计算和处理功能，一般也具备移动上网特性。这类终端包括：PDA、MID和UMPC设备等，例如iPad。

(3)便携式娱乐设备：这类设备可以显示和播放多媒体内容。该类设备包括：音频、视频播放器(例如iPod)，掌上游戏机，电子书，以及智能玩具和便携式车载导航设备。

(4)特定服务器：提供计算服务的设备，服务器的构成包括处理器、硬盘、内存、***总线等，服务器和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。

(5)其他具有数据交互功能的电子设备。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

本说明书中的各个实施例均采用相关的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。

尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行***、装置或设备(如基于计算机的***、包括处理器的***或其他可以从指令执行***、装置或设备取指令并执行指令的***)使用，或结合这些指令执行***、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行***、装置或设备或结合这些指令执行***、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。

应当理解，本发明的各部分可以用硬件、软件、固件或它们的组合来实现。

在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行***执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。

Claims (12)

1.一种在绝对定位布局中实现流式效果的方法，用于网页的制作，其特征在于，包括：

监控网页制作界面中第一元素的位置坐标；

在所述第一元素的位置坐标发生变动时，计算所述第一元素与第二元素之间的间隔；

判断所述间隔是否处于预置的阈值区间[a，b]内，a表示预先设定的元素之间间隔的安全阈值，b表示预先设定的元素之间间隔的最大值；

若否，则移动所述第二元素，使所述第一元素和所述第二元素之间的间隔恢复至所述阈值区间内。

2.根据权利要求1所述的方法，其特征在于，

若计算所得的所述第一元素与第二元素之间的间隔小于预定的安全阈值a，则向下移动所述第二元素以使所述第一元素和所述第二元素不发生交叠。

3.根据权利要求1所述的方法，其特征在于，

若计算所得的所述第一元素与第二元素之间的间隔大于预先设定的元素之间间隔的最大值b，则向上移动所述第二元素，减小所述第一元素和所述第二元素之间的间隔。

4.根据权利要求2所述的方法，其特征在于，

所述第一元素与第二元素之间的间隔小于预定的安全阈值通过以下操作之一发生：

所述第一元素的平移；或

增大所述第一元素的尺寸；或

当所述第一元素为多行文本框时，增加所述多行文本框中的文字的行数。

5.根据权利要求4所述的方法，其特征在于，

所述平移为沿浏览器可视区域滚动方向的移动。

6.根据权利要求4所述的方法，其特征在于，

所述增大所述第一元素的尺寸至少包括沿浏览器可视区域滚动方向尺寸的增加。

7.根据权利要求4所述的方法，其特征在于，

所述多行文本框中的文字的行数的增加为，沿浏览器可视区域滚动方向文字的行数的增加。

8.根据权利要求5至7中任一项所述的方法，其特征在于，所述计算所述第一元素与第二元素之间的间隔包括如下步骤：

以屏幕左上角为坐标原点，根据所述第一元素的长度和高度，计算位置发生变动后的第一元素各个端点的坐标；

根据所述第二元素的各个端点坐标，计算位置发生变动后第一元素和所述第二元素之间的间隔。

9.根据权利要求2所述的方法，其特征在于，

移动所述第二元素时，若第二元素超过了制作界面的边界，则增加制作界面的高度。

10.一种在绝对定位布局中实现流式效果的装置，用于网页的制作，其特征在于，包括：

监控模块，用于监控网页制作界面中第一元素的位置坐标；

计算模块，用于在所述第一元素的位置坐标发生变动时，计算所述第一元素与第二元素之间的间隔；

判断模块，用于判断所述间隔是否处于预置的阈值区间[a，b]内，a表示预先设定的元素之间间隔的安全阈值，b表示预先设定的元素之间间隔的最大值；

移动模块，用于在所述间隔处于预置的阈值区间[a，b]之外时，移动所述第二元素，使所述第一元素和所述第二元素之间的间隔恢复至所述阈值区间内。

11.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行前述任一权利要求1-9所述的在绝对定位布局中实现流式效果的方法。

12.一种非暂态计算机可读存储介质，该非暂态计算机可读存储介质存储计算机指令，该计算机指令用于使该计算机执行如权利要求1至9中任一项所述的在绝对定位布局中实现流式效果的方法。