时间戳

首页 > 解决方案 > 切换内容时保持相同的尺寸

html - 切换内容时保持相同的尺寸

问题描述

我有一个切换开关，可以显示一个或其他内容，例如

<Checkbox checked={checked} .../>
<div id="main">
{
    checked 
    ? <Content1 ..../>
    : <Content2 ..../>
}
</div>

问题是这两个内容可以有不同的维度，切换时很难看。我不想将两个组件都强制到某个最大高度/宽度；相反，我想将两者的高度强制为较高的高度，同样的宽度。

这可以用 CSS 解决吗？我考虑过将它们彼此重叠显示，不活动的不透明度为零且没有点击事件（可能还有负 z-index），但我看不出如何强制它们都从左上角开始，而让他们影响maindiv 的尺寸（所以position: absolute不起作用）。

如果 CSS 做不到，React 肯定可以，但这是个好主意还是有更好的方法？

标签： htmlcssreactjslayout

解决方案

用于display:grid在同一网格单元中将要“交换”的两个元素分层，并根据需要调整opacity和z-index。

label {
  display: flex;
  align-items: center;
}

label {
  padding: 1em;
  display: inline-block;
  margin: .25em;
  margin-bottom: 0;
}

input {
  margin-left: .25em;
}

.container {
  display: grid;
  width: 500px;
  margin: 1em;
}

p {
  margin: 0;
  padding: .25em;
}

.container div {
  border: 1px solid red;
  grid-row: 1;
  grid-column: 1;
}

#checker:checked+.container .content1 {
  opacity: 0;
  z-index: -1
}

#checker+.container .content2 {
  opacity: 0;
}

#checker:checked+.container .content2 {
  opacity: 1;
}
<label for="checker">Tick This</label>
<input name="checker" id="checker" type="checkbox" />


<div class="container">
  <div class="content1">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In sint amet vitae ea accusamus fuga blanditiis modi rem. Vitae iure, inventore corporis non blanditiis, ad optio ex molestiae repudiandae iste eos minus eligendi assumenda neque.</p>
  </div>
  <div class="content2">
    <p>Just short text</p>
  </div>
</div>

推荐阅读