如何定位div在表的底部?

Question

我想在表格的右边缘底部放置一个div。我正在使用引导，我发现使用偏移，我可以在表的底部角落移动div，但我不喜欢这个解决方案，因为似乎不能正常工作。那么我怎样才能在模态内的表格的底部角落放置div呢?下面的块是我试图定位的表的右下角:

<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>

完整代码:

<div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-10">
<div class="panel panel-primary panel-primary-trim">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body panel-body-trim">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
</thead>
<tbody>
<tr>
<td>DateExample</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>
</div>
</div>
</div>                               
</div>
</div>
</div>

Answer 1

我会将表放入具有相对定位的inline-blockdiv(包装器)中，然后对您想要在右下角的元素使用绝对定位(bottom: 0, right: 0)。表和定位元素都是相对定位包装器的子元素。

table {
border-collapse: collapse;
}
td {
padding: 3rem;
background: #ccc;
border: none;
border: 1px solid white;
}
.wrapper {
display:flex;
flex-direction: row;
height: auto;
justify-content: flex-start;
align-items: flex-end;
flex-wrap: no-wrap;
}
.bottomRight {
position: relative;
background: #bbb;
padding: 1rem;
padding: 3rem;
width: auto;
height: auto;
display: block;
border: 1px solid white;
border-left: none;
}

<div class='wrapper'>
<table>
<thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<div class="bottomRight">10</div>
</div>