Question

使用浮点数，弹性框或表格，有两种方法可以将两个相邻的块的大小调整为相同的高度或相同的宽度，具体取决于它们的内容而不使用JavaScript。

我想知道是否有办法在标签栏的面板上实现相同的效果，其中一次只能显示一个标签框。

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

我的目的是防止标签框下方或旁边的元素在切换标签时跳转到不同的位置，但我不想假设面板内容的尺寸，因为它们是动态的。< / p>

Answer 1

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

由于每个面板的内容应该像单独使用一样，它需要具有容器的宽度，否则内容将开始包装并影响其兄弟高度。

因此，为了允许正常流程，我添加了一个包装器并将 nn 次的子项作为宽度，然后使用transform: translate将它们拉到彼此之上，这样就可以在他们没有任何动静。

以下是使用flexbox的示例代码，我也建议您使用。

根据评论更新。

当然，人们可以像制作一个网格一样预定义这一点，你可以设置所需的最大数量的标签，然后它可以使用最多这个数量，这里定义为12但仅使用7

今天有效，无需等待Chrome：）

＆＃13;

(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);

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用flexbox和visibility: collapse（请参阅W3C draft），可以隐藏内容，同时仍考虑占用的空间。

以下示例正在使用IE和Firefox，而不是（还）在Safari，Opera和Chrome [in progress]中。

＆＃13;

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

＆＃13;

.container {
  display: flex;
  overflow: hidden;
}

.container div {
  visibility: collapse;
}

.container div.show {
  visibility: visible;
}

＆＃13;

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

＆＃13;

标签框的大小由纯CSS中最大的面板内容决定

2 个答案: