如何将 div 放在表格的底部？答案

【问题标题】：How to position a div right at the bottom of a table?如何将 div 放在表格的底部？
【发布时间】：2021-11-30 09:14:55
【问题描述】：

我想在表格的右边缘底部放置一个 div。我正在使用引导程序，我发现使用 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>

【问题讨论】：

div 会保存一些信息，例如余额，所以我希望它位于表格的边缘或右下角
你能把你的代码简化成你所需要的吗？您可能至少不需要所有这些 Bootstrap 类！
你需要我简化什么？该代码基本上包括一个模态内部的模态，有一个包含 10 列的表和一个包含三个标签的 div 部分，该部分包含 2 个列。我正在尝试在右下角的表格旁边显示带有标签的 div。我确实尝试过使用 offest 来移动 div，但我想知道这样做的正确方法

标签： html css twitter-bootstrap css-position

【解决方案1】：

我会将表格放入具有相对定位的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>

【讨论】：

我希望 div 位于表格边缘的右下角，它将成为一个单独的部分，用于保存总价和余额，如果您的解决方案适用于移动视图 @robertwade
@user16908948 抱歉，说明不清楚。以为您希望新框位于右下角上方。我在原始答案中更新了上面的 sn-p，将其 next 放在右下角的表格中。这个版本将简单地使用弹性盒定位来放置项目，而不是绝对定位。