Question

我有一个div缠绕在图像上，如下所示：

<div class="containing-div">
      <div class="image-wrapper">
           <img src="image.jpg">
      </div>
      <div class="unrelated-stuff">
           Blah blah blah.
      </div>
</div>

现在，我希望image-wrapper能够获取图像的大小，而不是更多。但事实并非如此;它反而填充到containing-div的高度。（参见实际页面：http://holyworlds.org/new_hw/wallpapers.php）

我的CSS是：

.image-wrapper{
  float: left;
  box-shadow: inset 0px 4px 10px black;
  background-image: url('image.jpg');
}

.image-wrapper img{
  visibility: hidden;
}
.unrelated-stuff{
  float: left;
}

现在，如果我没有声明Doctype，它可以正常工作。但是，如果我这样做，我所尝试的一切都会失败。

如何在image-wrapper使用<!doctype html>的同时使{{1}}与图像大小相同？

Answer 1

你试过了吗？

.image-wrapper {
  display: inline;
}

或者：

.image-wrapper {
  display: inline-block;
}

或者：

.image-wrapper {
  float: left;
}

Answer 2

CSS应该是......

.image-wrapper
{
    width: 0;
    height: 0;
}

除非为图像包装器设置overflow属性，否则

image-wrapper将自动获取图像的宽度和高度。

如何制作div * not * expand来填充它的父级？

2 个答案: