css - 垂直对齐 DIV 中的 2 张卡片实现 CSS

Question

我有以下表格和表格，它们并排成两列，如下所示:

这个表单/表格是基于datatable + materialize CSS。

我想将表格和表格放在一个 div 中，并确保表格和表格的底部始终对齐。

我四处寻找没有任何解决方案。

这是我的代码:

<div class="divider"></div>
              <!--Basic Form-->
              <div id="basic-form" class="section">
                <div class="row">
                  <div class="col s12 m4 l4">
                    <div class="card-panel">
                      <h4 class="header2">Add or Modify</h4>
                      <div class="row">
                        <form class="col s12">
                          <div class="row">


                            <div class="input-field col s2">
                              <input type="number" id="id" name="id" class="form-control" placeholder="Id" />
                              <label for="id">Id</label>
                            </div>

                            <div class="input-field col s10">
                              <?php 
                        //// function populate ($sql, $class,$name, $id, $title, $value,$option)

                             echo populate ("SELECT * FROM product_family order by product_type_id ASC","form-control","nm","nm","Select Product", "product_family", "product_family");?>
                              <label for="nm">Product</label>
                            </div>
                          </div>
                          <div class="row">
                            <div class="input-field col s6">
                              <input type="number" step=".01" placeholder="0.00" id="em" name="em" class="form-control" />
                              <label for="em">Win</label>
                            </div>


                            <div class="input-field col s6">
                               <input type="number" step=".01" id="hp" name="hp" class="form-control" placeholder="0.00"/>
                              <label for="message">Drop</label>
                            </div>
                          </div>
                          <div class="row">
                            <div class="input-field col s12">
                              <?php 
                        //// function populate ($sql, $class,$name, $id, $title, $value,$option)

                             echo populate ("SELECT * FROM currency order by id ASC","form-control","ad","ad","Select Currency", "currency", "currency");?>
                              <label for="ad">Currency</label>
                            </div>
                            <div class="row">
                              <div class="input-field col s12">

                                 <button type="button" id="save" class="btn btn-primary" onclick="saveData()">Save</button>
                                 <button type="button" id="update" class="btn btn-warning" onclick="updateData()">Update</button>

                              </div>
                            </div>
                          </div>
                        </form>
                      </div>
                    </div>
                  </div>
                  <!-- Form with placeholder -->
                  <div class="col s12 m8 l8">
                    <div class="card-panel">
                      <h4 class="header2">Products In DB</h4>
                      <div class="row">
                            <table id="table1" class="table table-bordered table-striped table-hover display compact" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                            <th width="20">ID</th>
                            <th>Product</th>
                            <th>Win</th>
                            <th>Drop</th>
                            <th width="100">Currency</th>
                            <th width="100">Action</th>
                            </tr>
                            </thead>
                            <tbody></tbody>
                            </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>  
          </div>

Answer 1

添加有助于解决问题的 css 代码::

.section .row {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    word-break: break-word;
}


.section .card-panel {
    height: 100%;
}