Перемещение одного HTML-элемента перед другим при сохранении потока документов

Question

Я пытаюсь создать модуль вкладки, такой как:

https://codepen.io/oknoblich/pen/tfjFl

Однако у меня возникли трудности, поскольку я не могу изменить макет HTML:

<div class="container">
    <div class="tab-header">Tab1</div>
    <div class="tab-content teal">Content1</div>
</div>
<div class="container current">
    <div class="tab-header">Tab2</div>
    <div class="tab-content teal">Content2</div>
</div>

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

Я создал два кода, которые иллюстрируют трудности:

https://codepen.io/dwigt/pen/pOQpLd (абсолютное позиционирование удаляет содержимое из потока документов)

https://codepen.io/dwigt/pen/YOREOJ (макет flexbox не занимает всю ширину страницы)

Есть ли в любом случаеЯ могу повторить функциональность вкладки, используя этот макет HTML и без JavaScript?

Answer 1

Вы можете использовать display: contents (что, к сожалению, не очень хорошо поддерживается ) в сочетании с макетом flexbox с переносом, установленным на элементе .wrapper.Таким образом, заголовки вкладок и содержимое вкладок будут обрабатываться одинаково, как если бы они находились на одном уровне друг с другом - элементы .container «прозрачны» для механизма компоновки.В результате все они будут размещены с применением логики flexbox.Наконец, чтобы сначала отображались три заголовка вкладки, мы устанавливаем порядок содержимого вкладки в какое-то высокое значение (здесь 100), и, поскольку у нас включена гибкая перенос, содержимое затем перемещается вниз к новой строке под заголовками.,Смотрите пример ниже:

.wrapper {
  max-width: 300px;
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.container {
  height: 50px;
  display: contents;
}
.container .tab-header {
  width: 100px;
  max-width: 100%;
  max-height: 100%;
  flex: 1 0 33.33%;
}
.container .tab-content {
  display: none;
  height: 200px;
  order: 100;
}
.container.current .tab-content {
  display: block;
  width: 300px;
  left: 0;
}

.footer {
  height: 500px;
  width: 300px;
  display: block;
}

.red {
  background: red;
}

.teal {
  background: teal;
}

<div class="wrapper">
    <div class="container">
        <div class="tab-header">Tab1</div>
        <div class="tab-content teal">Content1</div>
    </div>
    <div class="container current">
        <div class="tab-header">Tab2</div>
        <div class="tab-content teal">Content2</div>
    </div>
    <div class="container">
        <div class="tab-header">Tab3</div>
        <div class="tab-content teal">Content3</div>
    </div>
</div>
<div class="footer red">Footer Text</div>  

Answer 2

Это не совсем идеально, потому что первая вкладка немного шире, но попробуйте и посмотрите, не приблизит ли это вашу цель.Это позволяет вашим вкладкам быть на 100%, а также позволяет добавлять больше вкладок, которые равномерно располагаются от края до края вашего контейнера.

Дайте мне знать, как это работает: D

Добавить отображение: ячейка таблицы и ширина: 100% к вашему селектору CSS метка

label {
  display: table-cell;
  width: 100%;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}