html - 如何根据表格高度设置div的位置

Question

我制作了一个动态插入行的表格，然后我在表格下方创建一个 div，当表格高度由于更多行而增加时，div 不显示我在表格下方自动增加表格高度时设置 div 的位置？这是我的代码：

<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>               
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td style="color:black;">{{ invoice.description }}</td> 
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td>
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td>
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td> 
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div style="width:243px; height:67px; float:right; margin:0px 215px 0; border:1px solid black;">
<h5>&nbsp;Invoice Total(USD)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{invoiceamount}}</h5>
<h5>&nbsp;Paid to date&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{paidamount}}</h5>
<div class="horizontalRule2" runat="server"></div>
<h5>&nbsp;Invoice Total(USD)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{balanceamount}}</h5>
</div>

这是表格CSS：

#table{
float: right;
height: 110px;
margin: 4px 215px 0;
width: 686px;
}

这是我希望 div 在表格下方显示的屏幕截图：

Answer 1

我认为在这种情况下，我认为您也应该为这两个单元格保留一个表格，因为它们不知何故是表格数据的一部分。

这意味着您可以将它们添加到

<div id="table">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>               
</tr>
</thead>
<tbody>
{% for invoice in invoices %}
<tr>
<td style="color:black;">{{ invoice.description }}</td> 
<td style="text-align:right; color:black;">{{ invoice.quantity }}</td>
<td style="text-align:right; color:black;">{{ invoice.unitPrice }}</td>
<td style="text-align:right; color:black;">{{ invoice.linetotal }}</td> 
</tr>
{% endfor %}

<td colspan="3" style="text-align:right;"><h5>Invoice Total(USD)</h5></td>
<td style="text-align:right;"><h5>{{invoiceamount}}</h5></td>

<td colspan="3" style="text-align:right;"><h5>Paid to date(USD)</h5></td>
<td style="text-align:right;"><h5>{{balanceamount}}</h5></td>

</tbody>
</table>
</div>

Answer 2

尝试清除下面的 div#table 或总计 div：

div#table {
    clear:both;
}