Question

我正在我的页面上创建一个小视图，其中我有一个居中的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中，边缘将它推到了角落里。

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

我该如何解决这个问题？

Answer 1

要将图片准确放入.desc DIV的左下角，请将图片标记放在 .desc DIV内，并为其提供以下设置：

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

由于您的DIV已经有position: relative，因此它将充当绝对定位图像的位置锚点，左下角设置将其置于左下角。

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

CSS div margin auto，cant position element in created margin

1 个答案: