Question

我一直在谷歌搜索潜在的解决方案，但目前还找不到符合要求的解决方案。

<div class="parent">
    <div class="child1">I'm 60px tall and visible; my parent is 100px tall</div>
    <div class="child2">I'm 80px tall and hidden until needed</div>
    <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

我需要有一些带有父Div的子Div。
任何时候都只会展示一个孩子。
父Div必须始终与最高的孩子保持相同的高度，并且永远不会扩展或合同。

我将使用jQuery来更改可见孩子的CSS，但如果可能的话，我更喜欢使用CSS解决方案。

没有IE8 / 9/10支持。

有人有想法吗？

Answer 1

希望这是你想要的：

使用flex显示将孩子排列为列显示。
将他们的opacity设置为0，以便子元素仍保留在父div中，这将设置父高度与最高子级相同。
创建了一个新类visible来设置可见子项的样式，并设置默认子项（隐藏的）width: 0px，而可见的孩子将width: 100%

function show(element) {
  $('.parent div').removeClass('visible');
  $('.' + element).addClass('visible');
}

.parent {
  border: 1px dashed #000;
  display: flex;
}

.child1 {
  height: 60px;
  background: red;
}

.child2 {
  height: 80px;
  background: yellow;
}

.child3 {
  height: 100px;
  background: orange;
}

.parent div {
  opacity: 0;
  width: 0px;
}

.parent div.visible {
  opacity: 1;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child1 visible">I'm 60px tall and visible; my parent is 100px tall</div>
  <div class="child2">I'm 80px tall and hidden until needed</div>
  <div class="child3">I'm 100px tall and hidden until needed</div>
</div>

<br/>
<button onclick="show('child1')">Child 1</button>
<button onclick="show('child2')">Child 2</button>
<button onclick="show('child3')">Child 3</button>

Answer 2

使用opacity和0隐藏1，父母应该与最高的孩子一样高。

请参阅下面的代码段

$(function(){ 
  $(".c").fadeTo(0,0);
  $(".child1").fadeTo(0,1).addClass("visible");
  $(".btn").click(function(){
    $(".c").fadeTo(0,0);
    $(".visible").removeClass("visible").next().fadeTo(0,1).addClass("visible");
  });

});

.parent { position:relative; border:2px solid red; display:flex  }
.c { border:2px solid blue; }
.child1 { height:60px; }
.child2 { height:80px; }
.child3 { height:100px; }

<div class="parent">
    <div class="c child1">I'm 60px tall and visible; my parent is 100px tall</div>
    <div class="c child2">I'm 80px tall and hidden until needed</div>
    <div class="c child3">I'm 100px tall and hidden until needed</div>
</div>

<button class="btn">Show Next Child</button>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

父母Div保持最高儿童的身高

2 个答案: