html - 根据div位置定位图片

Question

我在靠近页面中心的地方有一个 div。下面是 div 结构。

<div id="newsFeed">
   <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

CSS:

#newsFeed{
    position: absolute;
    width: 100%;
    height: 100%;
}
#thumb{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

如何将图片从当前位置向右移动 20px？

Answer 1

您可以通过将其 margin-left 设置为 20px 来将图像向右移动。这会在图像左侧添加 20 像素的空间，给人的印象是图像向右移动了 20 像素。

#thumb {
    margin-left: 20px;
}

演示

#newsFeed {
  position: absolute;
  width: 100%;
  height: 100%;
}
#thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: 20px;
}

<div id="newsFeed">
  <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>

或者，您也可以将 left 设置为 20px。

#thumb {
    ....
    left: 20px;
}

演示

#newsFeed {
  position: absolute;
  width: 100%;
  height: 100%;
}
#thumb {
  position: absolute;
  left: 20px;
  right: 0;
  top: 0;
  bottom: 0;
}

<div id="newsFeed">
  <img id="thumb" src="news/news123.png" height=50 width=50 />
</div>