保持最高兒童身高的父級代表

Question

我一直在使用Google搜索潛在解決方案，但仍未找到符合要求的解決方案。

<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。
• 只有一個孩子會隨時出現。
• 母公司必須始終保持與最高孩子一樣的身高，永遠不會擴大或合同。

我將使用jQuery來更改可見孩子的CSS，但我更喜歡CSS解決方案的高度，如果可能的話。

不支持IE8/9/10。

任何人有想法嗎？

Answer 1

希望這是你想要什麼：

1. 使用flex顯示安排孩子作爲列顯示。
2. 將它們的opacity設置爲0，以便子元素仍然保留在父div中，這將設置父高度與最高的子元素相同。
3. 創建一個新的類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>