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

时间:2015-03-11 13:15:52

标签: html css position

我有一个包含表格的div,它们居中:

<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;
 }

如果表格大于div的大小,它会重叠它,我需要它来调整父div的大小。我相信绝对位置是问题...有没有办法解决这个问题?

1 个答案:

答案 0 :(得分:2)

你可以使用translate和min-width,用绝对值删除高度:

.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>

或使用flex模型

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>