html - 图像忽略 Div 容器

Question

HTML:

<div>
    <img>
    <div>
    <table>...</table>
    </div>
</div>

CSS:

#img { 
position: absolute;
right: 0px;
}

两个 div 与表格的大小相同。
我希望图像 float 在表格的右上角。
这导致 img 在屏幕的右侧而不是在 div 中。

Answer 1

您需要将 position:relative; 添加到包含的 div。另外，我建议不要使用表格，除非您要显示表格数据，否则不应将它们用于布局。

.container {
  position:relative;
  width:500px;
  height:500px;
  border:1px solid black;
}
.container img {
  position:absolute; /* absolute misspelled in your example */
  top:0;
  right:0;
}

<div class="container">
    <img src="http://placehold.it/250x250" />
    <div>
    <table></table>
    </div>
</div>