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

标签 html css

我有一个 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 在它下面?为什么?

最佳答案

问题是 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>

关于html - 无法弄清楚如何在 float 的 div 旁边放置任何东西,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34994289/

相关文章:

html - 带 anchor 和按钮的盒子模型

html - 嵌套 <p> 和 <img>,如 '<p><img src=' '></p>'

javascript - 如何在一个标签中调用两个 Action 链接?

javascript - 如何在html div标签上显示person对象的属性?

html - 如何让我的导航栏更细?

css - 将固定宽度调整为 div 并在 css 按钮单击上创建效果

javascript - 如何在 html 表格中给出分界线。?

javascript - 更改多个 iframe 的内容

javascript - jQuery 调用 load(url) 并将内容存储为字符串

html - CSS重构动画div