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>

显示：表格不取动态高度带孩子的身高

1 个答案: