[发明专利]页面元素显示方法、装置及电子设备

说明书

本发明提供了一种页面元素显示方法、装置及电子设备，涉及显示技术领域，该方法包括：如果需要显示目标浮动元素，获取该目标浮动元素的预设显示位置，以及该目标浮动元素的空间尺寸；如果该预设显示位置的空间尺寸，小于该目标浮动元素的空间尺寸，调整该目标浮动元素的显示位置；进而将该目标浮动元素显示在调整后的显示位置上。本发明实施例通过比较浮动元素本身的空间尺寸及其预设显示位置的空间尺寸，动态调整浮动元素的显示位置，尽可能多地向用户展示内容，可以提高页面元素显示的灵活性，优化显示效果。

技术领域

本发明涉及显示技术领域，尤其是涉及一种页面元素显示方法、装置及电子设备。

背景技术

在CSS(Cascading Style Sheets，层叠样式表)中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。浮动元素的浮动有以下两个特点：(1)浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止；(2)由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

以基本位置(Base Placement)为左侧为例，如果参考元素(Reference Element)与页面左侧的距离小于浮动元素(Popper Element)所需的空间，而参考元素与页面右侧的距离大于浮动元素所需的空间，如果仍然按照预设的左侧放置浮动元素，然后将浮动元素右移，那么会出现遮挡参考元素的场景。可见，现有的页面元素显示方式，灵活性较差，显示效果较差。

发明内容

有鉴于此，本发明的目的在于提供一种页面元素显示方法、装置及电子设备，可以提高页面元素显示的灵活性，优化显示效果。

第一方面，本发明实施例提供了一种页面元素显示方法，包括：如果需要显示目标浮动元素，获取该目标浮动元素的预设显示位置，以及该目标浮动元素的空间尺寸；如果该预设显示位置的空间尺寸，小于该目标浮动元素的空间尺寸，调整该目标浮动元素的显示位置；将该目标浮动元素显示在调整后的显示位置上。

在本发明较佳的实施例中，上述方法还包括：如果该预设显示位置的空间尺寸，大于该目标浮动元素的空间尺寸，将该目标浮动元素显示在该预设显示位置上。

在本发明较佳的实施例中，上述获取该目标浮动元素的预设显示位置的步骤，包括：获取与该目标浮动元素对应的参考元素，以及该目标浮动元素相对于该参考元素的显示方位；根据该参考元素的显示位置，以及该目标浮动元素相对于该参考元素的显示方位，确定该目标浮动元素的预设显示位置。

在本发明较佳的实施例中，上述如果该预设显示位置的空间尺寸，小于该目标浮动元素的空间尺寸，调整该目标浮动元素的显示位置的步骤，包括：如果该预设显示位置在预设维度上的空间尺寸，小于该目标浮动元素在该预设维度上的空间尺寸，调整该目标浮动元素的显示位置；该预设维度包括高度和/或宽度。

在本发明较佳的实施例中，如果该目标浮动元素的预设显示位置，位于该目标浮动元素对应的参考元素的宽度方向上，该预设维度包括宽度；如果该目标浮动元素的预设显示位置，位于该目标浮动元素对应的参考元素的高度方向上，该预设维度包括高度。

在本发明较佳的实施例中，上述如果该预设显示位置在预设维度上的空间尺寸，小于该目标浮动元素在预设维度上的空间尺寸，调整该目标浮动元素的显示位置的步骤，包括：获取该参考元素的第一元素边界与该参考元素所在的页面的第一页面边界的距离；其中，该第一元素边界为该参考元素中靠近该预设显示位置的边界；该第一页面边界为该页面中靠近该预设显示位置的边界；如果该距离小于该目标浮动元素在预设维度上的空间尺寸，调整该目标浮动元素的显示位置。

在本发明较佳的实施例中，上述调整该目标浮动元素的显示位置的步骤，包括：确定该目标浮动元素的备选显示位置；根据该备选显示位置的空间尺寸，以及该预设显示位置的空间尺寸，确定该目标浮动元素的最终显示位置。