允许父 div 在子元素变大时调整大小

Question

我有一个 div 包含一个 table ，它们居中：

<div class="parent">
 <table class="child">
 </table>
</div>

CSS:

.parent{
 position: absolute;
 width:300px;
 height:200px;
 top:50%;
 left:50%;
 margin:-100px 0 0 -150px;
 background: #fff;
 border: 1px solid #fff;
 border-radius: 5px ;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px ;
 display:inline-block;
 text-align:center;
 }

万一 table 变得比 div 的大小大，它会重叠它，我需要它来调整父 div too.I 的大小相信绝对位置有问题吗...有办法解决这个问题吗？

Answer 1

您可以使用平移和最小宽度，使用绝对删除高度：

.parent{
 position: absolute;
 min-width:300px;/* optionnal*/
 top:50%;
 left:50%;
 background: #fff;
 border: 1px solid #fff;
 border-radius: 5px ;
 text-align:center;
 transform:translate(-50%,-50%);
 }
.child {
  margin:0 auto;
}
td {
  border:solid;
}
table:hover td{
  padding:2em;/* demo purpose */
}

<div class="parent">
 <table class="child">
   <tr>
     <td>td</td>
     <td>td</td>
     <td>td</td>
   </tr>
   <tr>
     <td>td</td>
     <td>td</td>
     <td>td</td>
   </tr>
 </table>
</div>

或使用弹性模型

html,body {
  height:100%;
  width:100%;
  }
body {
  display:flex;
  align-items:center;/* vertical*/
  justify-content:center;/* horizontal*/
  margin:0;
  }
.parent{
  background: #fff;
  border: 1px solid #fff;
  border-radius: 5px ;
  -moz-border-radius: 5px ;
  -webkit-border-radius: 5px ;
  display:inline-block;
  text-align:center;
}
.child {

}
td {
  border:solid;
}
table:hover td{
  padding:2em;
}

<div class="parent">
 <table class="child">
   <tr>
     <td>td</td>
     <td>td</td>
     <td>td</td>
   </tr>
   <tr>
     <td>td</td>
     <td>td</td>
     <td>td</td>
   </tr>
 </table>
</div>

允许父 div 在子元素变大时调整大小

Allowing parent div to resize when child element is getting bigger

html

css

position