将两个div分别置于table表格的左边和右边，如图所示：
代码如下：
<body>
<div class="left" style="background-color: rebeccapurple;width: 100px;height: 200px; float: left;"></div>
<table border="1" style="float: left;">
<tr>
</tr>
<tr>
<th>Month</th>
<th>
<p>Savings</p>
</th>
</tr>
<tr>
<td>January</td>
<td>$100$100$100$100$100$100$100$100$100$100$100$100$100</td>
</tr>
</table>
<div class="right" style="background-color: rebeccapurple;width: 100px;height: 200px; float: left;"></div>
</body>
当向表格中输入文字，文字长度增加到一定程度后，两个div和表格就不再同一行了，如图所示
请问为什么会这样呢，该怎么让他们一直都处于同一行呢？
