如何将div放置在表格的底部？
如何将div放置在表格的底部？
提问于 2021-10-11 16:05:22
我想把一个div放在桌子的右下角。我正在使用bootstrap，我发现使用offest可以将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>回答 1
Stack Overflow用户
发布于 2021-10-11 18:14:03
我会将表放入一个具有相对定位的inline-block div (包装器)中，然后对右下角的元素使用绝对定位(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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69529272
复制相关文章
相似问题
腾讯云开发者
