CSS div 边距自动，无法在创建的边距中定位元素

Question

我正在我的页面上创建一个小 View ，其中有一个居中的 500x650 div，其中包含一些文本。

我有一个 bootstrap div 作为容器，<div class="container"> .在里面我有一个居中的 500x650 div，带有这样的 CSS:

.desc {
  position: relative;
  margin: 30px 245px 0px;
  height: 500px;
  width: 650px;
  background: #fff;
  border: 1px dashed #cbd0d8;
  padding: 5px;
}

这看起来不错。现在，我正在尝试添加一个小图像，该图像应该位于虚线边框的左下角。问题是，我以 margin: auto 为中心，在 .desc-div 的两侧创建了一个巨大的水平边距，所以我无法定位我的 img，它位于一个带有 position: relative 的 div 中。 ，因为边距将其向下推到 Angular 落下方。

我可以使用 position: absolute在我的图片上，但我正在努力避免这种情况，因为据我所知，它在不同尺寸的显示器上看起来会有所不同，而且我希望这张图片能够恰好位于一个位置。

我该如何解决？

Answer 1

要将您的图片恰好放在 .desc DIV 的左下角，请将您的图片标签放在 inside .desc DIV 中，然后给它以下设置:

img.yourclass {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 30px;
 }

由于您的 DIV 已经有了 position: relative，它将充当绝对定位图像的位置 anchor ，bottom 和 left 设置将其放置在左下角。

宽度和高度当然取决于图像本身。根据需要进行调整。