Question

我正在尝试创建这样的标签模块：

但是由于无法更改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>

问题在于，绝对定位会从文档流中删除内容，而其他方法会阻止内容成为页面的整个宽度。

我创建了两个codepen来说明困难：

https://codepen.io/dwigt/pen/pOQpLd（绝对定位可从文档流中删除内容）

https://codepen.io/dwigt/pen/YOREOJ（Flexbox布局不会占用完整的页面宽度）

无论如何，我是否可以使用此HTML布局而不使用JavaScript复制制表符功能？

Answer 1

这不是很完美，因为第一个选项卡的宽度稍宽一些，但是请试一下，看看这是否还不能使您更接近目标。它可以使标签的显示率为100％，还可以添加更多标签，使标签的边缘从容器的边缘到边缘均匀分布。

让我知道它如何工作：D

在css选择器 label

中添加显示：表格单元格和宽度：100％

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;
}

Answer 2

您可以结合使用display: contents（不幸的是，supported不太好）与在.wrapper元素上设置的带包装的flexbox布局结合使用。这样，标签页眉和标签页内容将被同等对待，就好像它们彼此处于同一级别一样-.container元素对于布局引擎是“透明的”。结果，它们都将应用弹性框逻辑进行布局。最后，要首先显示三个选项卡标题，我们将选项卡内容的顺序设置为某个较高的值（此处为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>

在保持文档流的同时将一个HTML元素移至另一个HTML元素

2 个答案: