• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

html 来源:Arsal Ali 3次浏览

我制作了一个表格,其中的行是动态插入的,然后当表格高度增加时,由于行数更多,div不显示我在表格下面创建div div我没有设置位置一个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; 
} 

这里的截图,我想见下表格显示:

enter image description here

===========解决方案如下:

尝试清除格#表或总计的div下面是:

div#table { 
    clear:both; 
} 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)