Question

我稍微修改了jquery mobile，因此可以将 data-type =“horizontal”转换为标签查看器。

请在此处查看我的示例页面 - tabview

我遇到的一个问题是需要将元素定位为绝对/相对。

我需要绝对定位与相对定位的 .ui-collapsible-set 相关的可折叠内容，以使可折叠内容部分跨越整个tabview宽度。

我想知道是否有任何变通方法可以避免像这样定位元素，因为它会在页面上的常规元素流中产生所有类型的问题。

感谢您的一些意见！

Answer 1

.ui-collapsible-content是.ui-collapsible

的孩子

如果标题将浮动到水平堆叠，但内容显示在下面的全宽，那么您需要：

A）将内容从流程中取出（就像你一样）

B）重构html以使其离开那里

<container>
    <headerArea><header></header><header></header></headerAread>
    <contentArea></contentAre>
</container>

Answer 2

好的，我找到了一种方法，这很尴尬，但工作......

可以用这样的css完成：

.ui-collapsible-set-horizontal.ui-grid-a .ui-block-a .ui-collapsible-content {
    position: relative;
    width: 199.3%;
    padding: 0;
    }
.ui-collapsible-set-horizontal.ui-grid-a .ui-block-b .ui-collapsible-content {
    left: -100%;
    width: 199.3%;
    position: relative;
}

我的问题是我必须在.ui-collapsible-content上设置pos：absolute，以便此元素覆盖整个tabview。

以上适用于双网格标签，所以基本上我将宽度设置为元素宽度的两倍（tabview-set，2个标签，每个100％宽度=设置为200％，3个标签，设置为300 ％等）并使用pos：相对于所有前面的标签宽度，将第2，第3，第4个标签放在左侧。

很好地工作，因为我不再使用pos：absolute，内容部分现在不必设置为硬编码（高度为123px），而是根据包含的内容进行扩展。

为绝对定位元素提供“大小”的变通方法？

2 个答案: