无法弄清楚如何在浮动的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，看看它是否有效。