不要将div调整为包含的图像

Question

我想创建一个div，它有一些链接和徽标图像。问题是我不希望div调整大小到图像大小。我希望图像超过div。我想要像图像一样的东西。但是当我在div中添加图像时，div大小会增加以包含图像。

Answer 1

您可以使用absolute定位：

HTML：

<div class="main">
  <div class="image">Image Div</div>
</div>

CSS：

.main {
  border: 1px solid green;
  width: 50%;
  height: 50px;
}


.image {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

您可以尝试here。

Answer 2

您所说的是您想从正常流程中删除图像。有几种方法可以做到这一点：

浮

img {
    float: left;
    margin: <position it with this>;
}

浮动很方便，因为它会从正常流中移除元素，同时仍然可以选择清除浮动。它还会在靠近时推动float: right导航。唯一的缺点是它没有绝对那么强大。

绝对

#nav {
    position: relative; /* child positioned in relation to the first element with non-static position */
}
img {
    position: absolute;
    z-index: 1;
    left: <position it with this>;
    top: <position it with this>;
}

绝对完全从流中移除元素，因此它不会干扰任何东西，包括正确的导航（这可能是一个缺点）。您可以使用left和top准确定位。

负保证金

img {
    margin-bottom: <some negative number>;
}

这会将容器的底部向上拉，使其看起来像是正常流动，没有后果。我个人更喜欢这个解决方案只要您能够计算出正确的边距底部，它就能正常工作。

平原，固定高度

#nav {
    height: <some height>;
}

最简单的解决方案：只需给你的导航设定一个高度。