Question

如果table1的位置居中且table1的宽度大于table2，如何在table1下定位table2？

HTML

<table id="table1" align="center" style="width:150px;">
<tr>
    <td height="50">Table 1</td>
</tr>
</table>
<table id="table2">
    <tr>
        <td height="50">Table 2</td>
    </tr>
</table>

CSS

#table1 {
   background: #ccc
}
#table2 {
   background: #666;
}

问题图片

https://prnt.sc/i9r851

Answer 1

首先，我将两个表放入div中，并将div放在div上，而不是放在id上 - ＆＃39; table1＆＃39;和＆＃39; table2＆＃39;我用左手浮动使它们成为另一个。

<div id="center">
<table id="table1" style="width:150px;">
<tr>
    <td height="50">Table 1</td>
</tr>
</table>
<table id="table2">
    <tr>
        <td height="50">Table 2</td>
    </tr>
</table>
</div>

CSS：

#table1 {
background: #ccc;
float:left;
}
#table2 {
background: #666;
float:left;
clear:left;
}
#center{
  top:50%;
  left:50%;
  position: relative
}

Answer 2

...将它们放在父容器元素中并应用以下属性：

.parentdiv {
  display:table;
  width:auto;
  margin:0 auto;
}

如何在table1下面定位table2？

2 个答案: