顯示：表中未採取動態高度抱着孩子身高

Question

我有3個div元素，一個是父和其他兩個是小孩：

<div id="table"> 
    <div id="first"> dinesh </div> 
    <div id="second"> pathak </div> 
</div> 

and their css are: 

     #table { 
      display: table; 
      width: 200px; 
      height: 200px; 
      margin: 0; 
      border: 5px solid blue; 
      padding: 5px; 
     } 

     #first { 
      display: table-cell; 
      border: 3px solid red; 
      margin: 2px; 
      width: 50px; 
      height: 200px; 
      overflow: hidden; 
     } 

     #second { 
      display: table-cell; 
      border: 3px solid red; 
      margin: 2px; 
      width: 50px; 
      height: 200px; 
      overflow: hidden; 
     } 

我給#table div元素高度的高度#first和#second的高度大於其父項。但我希望內部div只有在父母身高和其他隱藏的情況下才可見。但是，父母正在考慮其子女的身高。

Answer 1

Overflow:hidden只適用於塊級元素，因此它不適用於display: table。要解決此問題，您可以在內部元素上使用position: absolute，在父級div上使用position: relative。

希望這會有所幫助！

 #table { 
 
      display: table; 
 
      width: 200px; 
 
      height: 100px; 
 
      margin: 0; 
 
      border: 5px solid blue; 
 
      padding: 5px; 
 
      position: relative; 
 
      overflow: hidden; 
 
     } 
 

 
     #first { 
 
      display: table-cell; 
 
      border: 3px solid red; 
 
      margin: 2px; 
 
      width: 50px; 
 
      height: 300px; 
 
      position: absolute; 
 
      top: 0; 
 
      left: 15%; 
 
     } 
 

 
     #second { 
 
      display: table-cell; 
 
      border: 3px solid red; 
 
      margin: 2px; 
 
      width: 50px; 
 
      height: 300px; 
 
      position: absolute; 
 
      top: 0; 
 
      left: 55%; 
 
     }

<div id="table"> 
 
    <div id="first"> dinesh </div> 
 
    <div id="second"> pathak </div> 
 
</div>