html - CSS:对齐表重叠DIV容器

我创建了两个表，这些表使用html源代码中的属性align="left"和align="right"并排显示。我将这些表打包到具有指定类outerdiv的div容器中，以便可以在它们后面添加线性渐变背景。不幸的是，这些表没有显示在div内部。

我尝试将table-layout:fixed;添加到.table，因为某些网站推荐我。我还将border-collapse:separate;设置为表格单元格。

如何将背景正确放置在桌子后面？

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
}

<div class="outerdiv">
  <table class="table" align="left">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" align="right">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

最佳答案

只需将display: inline-block添加到您的outerdiv类。这将正确地将表包装在父div中。像这样：

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
  display: inline-block;
}

<div class="outerdiv">
  <table class="table" align="left">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table" align="right">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

另外，马克西米利安（Maximillian）在他的帖子中也提到了您似乎正在使用的align属性。 HTML5中不再使用它。而是给表float: left。像这样：

.table {
  width: 48%;
  margin: 1% !important;
  background: red;
  border-spacing: 20px;
  table-layout: fixed;
  float: left;
}
.outerdiv {
  border: 1px solid rgb(164, 164, 164);
  border-radius: 8px;
  background: transparent linear-gradient(rgb(255, 255, 255), rgb(222, 222, 222)) repeat scroll 0% 0%;
  clear: both;
  display: inline-block;
}

<div class="outerdiv">
  <table class="table">
    <tbody>
      <tr>
        <td>4
        </td>
      </tr>
      <tr>
        <td>Apples
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <tbody>
      <tr>
        <td>2
        </td>
      </tr>
      <tr>
        <td>Bananas
        </td>
      </tr>
    </tbody>
  </table>
  <p></p>
</div>

关于html - CSS:对齐表重叠DIV容器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37493485/