html - 无法弄清楚如何在 float 的 div 旁边放置任何东西

Question

我有一个 float 的 div，它的右侧有一个 200px 边距，我想在该空白处放置一个 table .

这是 div 的 CSS:

#testo {
  border-right: solid black 1px;
  background-color: white;
  margin-right: 200px;
  text-align: justify;
  padding: 7px;
  float: left;
  font-size: 14px;
}

但是 table 在它下面？为什么？

Answer 1

问题是 float 元素的边距仍然占用空间。因此，流中的另一个元素不能在该空间中并被推到下一行。

一种解决方案是将表格绝对定位在右侧，以便将其从流程中移除。

#wrapper {
  position: relative;
}
#wrapper div {
  margin-right: 200px;
  float: left;
}
table {
  position: absolute;
  top: 1em;
  right: 0;
  width: 190px;
  border: 1px solid;
}

<div id="wrapper">
  <div>Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro. Uno Dos Tres Quatro Cinco no Dos Tres Quatro Cinco no
    Dos Tres Quatro Cinco. Iti ni san shi, Iti ni san shi. Un deux trois quatre. Un deux trois quatre. Um dois três quatro. Um dois três quatro</div>
  <table>
    <tr>
      <td>Hello</td>
    </tr>
    <tr>
      <td>World</td>
    </tr>
  </table>
</div>