按最大面板内容大小的选项卡框 CSS

Question

使用浮动、flexbox 或 table，有不同的方法可以将两个相邻块的大小设置为相同的高度或相同的宽度，具体取决于它们的内容 而不使用 JavaScript.

我想知道是否有一种方法可以实现一次只有一个可见的选项卡框面板。

因此，例如，如果面板是空的，则其大小（或至少其背景）应扩展到面板堆栈中最大面板的大小。

我的目的是防止选项卡框下方或旁边的元素在切换选项卡时跳转到不同的位置，但我不想对面板内容的尺寸做任何假设，因为它们是动态的。

Answer 1

在概念层面上，以及我如何理解您的问题，您将需要一个行结构，例如 table 或 flexbox，其中同一行上的兄弟姐妹大小相等。

由于每个面板的内容都应该像单独的一样，因此它需要具有其容器的宽度，否则内容将开始换行并影响其兄弟姐妹的高度。

所以为了允许正常的流程，我添加了一个包装器和 nn 乘以子级数量作为宽度，然后使用 transform: translate 将它们拉到彼此之上，这样就可以在它们之间制作动画而无需任何移动。

这里是使用 flexbox 的示例代码，我也推荐使用它。

根据评论更新。

当然可以像制作网格一样预先定义它，即设置网格的最大数量，然后它最多可以使用该数量，此处定义为 12，但仅使用 7

今天就可以了，不用等 Chrome :)

(function (count) {
  var button = document.querySelector('button');
  var children = document.querySelectorAll('.wrapper div');
  button.addEventListener('click', function() {
    children[count].classList.toggle('show');
    count++; if (count == children.length) count = 0;
    children[count].classList.toggle('show');
  })
})(0);

html, body {
  margin: 0;
}
.container {
  overflow: hidden;
}
.wrapper {
  display: flex;
  background: lightgray;
  width: 1200%;
}
.wrapper div {
  position: relative;
  width: calc(100% / 12);
  background: lightblue;
  padding: 10px;
  transition: opacity 1s, transform 1s;
  opacity: 0;
}
.wrapper div.show {
  opacity: 1;
}

.wrapper div:nth-child(2)  { transform: translate(-100%); }
.wrapper div:nth-child(3)  { transform: translate(-200%); }
.wrapper div:nth-child(4)  { transform: translate(-300%); }
.wrapper div:nth-child(5)  { transform: translate(-400%); }
.wrapper div:nth-child(6)  { transform: translate(-500%); }
.wrapper div:nth-child(7)  { transform: translate(-600%); }
.wrapper div:nth-child(8)  { transform: translate(-700%); }
.wrapper div:nth-child(9)  { transform: translate(-800%); }
.wrapper div:nth-child(10) { transform: translate(-900%); }
.wrapper div:nth-child(11) { transform: translate(-1000%); }
.wrapper div:nth-child(12) { transform: translate(-1100%); }


/*  styling stuff  */
button {
  padding: 5px 10px;
  margin-bottom: 10px;
}

<button>Toggle</button>

<div class="container">
  <div class="wrapper">
    <div class="show">
      1. Some text
    </div>
    <div>
      2. Some more text<br> Some more text<br>
    </div>
    <div>
      3. Some even more text<br> Some even more text<br> Some even more text<br> Some even more text<br> 
Some even more text<br>     </div>
    <div>
      4. Some more text<br> Some more text<br>
    </div>
    <div>
      5. Some text
    </div>
    <div>
      6. Some more text<br> Some more text<br>
    </div>
    <div>
      7. Some even more text<br> Some even more text<br> Some even more text<br> Some even more text<br> 
Some even more text<br>     </div>
  </div>
  The height is kept so text like this does not move 
</div>

Answer 2

使用 flexbox 和 visibility: collapse（参见 W3C draft），可以隐藏内容，同时占用的 space 仍然被考虑在内。

以下示例适用于 IE 和 Firefox，（目前）不适用于 Safari、Opera 和 Chrome [in progress]。

var count = 0;
var children = document.querySelectorAll('.container div');
document.querySelector('button')
.addEventListener('click', function () {
  children[count++ % 4].classList.toggle('show');
  children[count   % 4].classList.toggle('show');
});

.container {
  display: flex;
  overflow: hidden;
}

.container div {
  visibility: collapse;
}

.container div.show {
  visibility: visible;
}

<button>toggle</button>

<div class="container">
  <div class="show">
    1. Some text
  </div>
  <div>
    2. Some more text<br/>
    Some more text
  </div>
  <div>
    3. Some even more text<br/>
    Some even more text<br/>
    Some even more text<br/>
    Some even more text<br/>
    Some even more text
  </div>
  <div>
    4. Some more text<br/>
    Some more text
  </div>
</div>

<p>Text below, does not move on toggle.</p>

按最大面板内容大小的选项卡框 CSS

Tab box sized by biggest panel content in pure CSS

css

tabs

css-float

flexbox

dynamic-sizing