无法弄清楚如何在浮动div旁边放置任何东西

Question

我有一个浮动的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

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

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

#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>

Answer 2

因为你的div有100％的宽度。 将宽度/最大宽度设置为此div，表格不会被删除。

Answer 3

这是因为div默认为display: block。

无论大小如何，都会在页面上占据整行。

尝试将display:inline-block设置为div并查看它是否有效。