html - 如何将 div 与表格右对齐？

Question

我有一个真正困扰我的 CSS 问题。我有一个带有标题和选择的 div 容器。我也有一张桌子，我想让我的选择与我的桌子右对齐。

这就是我要的：

我将我的选择设置为向右浮动，并按预期在屏幕的右端结束。问题是我的表格宽度不是屏幕的 100%（宽度实际上可能会有所不同）。

这就是我得到的：

如何使我的 div 容器与选择右对齐我的表？

这是我迄今为止尝试过的：

table,
th,
td {
  border-collapse: collapse;
  border: 1px solid black;
}

.mytable {
  clear: both;
}

.mysortdiv {
  float: right;
}

<div class="mysortdiv">
  <div>Sort</div>
  <select>
    <option value="1">First sort option</option>
    <option value="2">Second sort option</option>
  </select>
</div>
<table class="mytable">
  <thead>
    <tr>
      <th>My first column</th>
      <th>My second column</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Something 1</td>
      <td>Other thing 1</td>
    </tr>
    <tr>
      <td>Something 2</td>
      <td>Other thing 2</td>
    </tr>
  </tbody>
</table>

标签： htmlcssalgorithmsyntax

Answer 1

你可以把它包装在一个div中吗？然后将每个 div 设置为向右浮动！