给一个绝对定位元素“大小”的变通方法？

Question

我对jquery做了一些修改，因此数据类型=“水平”的可折叠转换为选项卡查看器。

参见这里的示例页面- 表视图

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

我需要绝对定位可折叠内容相对于相对定位的..ui可折叠集，以使可折叠内容部分跨越整个表视图宽度。

我想知道是否有任何解决办法来避免这样的元素定位，因为它在页面上元素的常规流中产生了各种各样的问题。

谢谢你的意见！

Answer 1

好吧，我找到了一个办法，这很尴尬，但是工作.

可以使用这样的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;
}

我的问题是，为了让这个元素覆盖整个表视图，我必须设置pos：..ui可折叠内容的绝对值。

上面的选项卡适用于两个网格选项卡，因此基本上我将宽度设置为元素宽度的两倍(选项卡集，2个选项卡，每个100%宽度=设置为200%，3个选项卡，设置为300%等)，并使用pos:相对于前面所有选项卡的宽度，将第2、3、4选项卡放置在左边。

工作得很好，而且由于我不再使用pos:绝对值，所以现在不需要设置硬编码部分(高度123 on )，而是根据包含的内容进行扩展。

Answer 2

.ui-collapsible-content是.ui-collapsible的孩子

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

( A)把内容从流程中删除(就像你做的那样)

( B)重构html以将其从其中提取出来。

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