обходные пути, чтобы дать "размер" абсолютно позиционированному элементу?

Question

Я немного изменил jquery mobile, поэтому разборный с data-type = "горизонтальный" превращается в просмотрщик вкладок.

См. Мой пример страницы здесь - tabview

Единственная проблема, с которой я столкнулся, - это необходимость позиционировать элементы абсолютные / относительные.

Мне нужно абсолютно позиционировать складное содержимое относительно относительно позиционированного .ui-collapsible-set , чтобы раздел с развертываемым содержимым охватывал всю ширину табуляции.

Я хотел бы знать, есть ли какие-либо обходные пути, позволяющие избежать позиционирования элементов, подобных этому, потому что это создает всевозможные проблемы в обычном потоке элементов на странице.

Спасибо за некоторый вклад!

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: absolute для .ui-collapsible-content, чтобы элемент this охватывал все таб-представления.

Вышеприведенное работает для вкладки с двумя сетками, поэтому в основном я устанавливаю ширину, равную двойной ширине элемента (набор вкладок, 2 вкладки, каждая ширина 100% = установлено на 200%, 3 вкладки, установлено на 300 % и т. д.) и используя pos: относительно положения 2-й, 3-й, 4-й вкладки слева по ширине всех предыдущих вкладок.

Работает хорошо, и поскольку я больше не использую pos: absolute, раздел контента теперь не нужно задавать жестко закодированным (высота 123px), а расширяется в зависимости от содержимого.

Answer 2

.ui-collapsible-content является ребенком .ui-collapsible

Если заголовки будут перемещаться горизонтально, но содержимое должно отображаться на всю ширину ниже, то вам необходимо:

А) вынуть содержимое из потока (как вы сделали)

B) рефакторинг HTML, чтобы получить его оттуда

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