logo标签列表

如何使一个 div 不会扩展以填满其父元素？

htmlcsslayout
7

我有一个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>？

2个回答
10

你尝试过这个吗：

.image-wrapper {
  display: inline;
}

或者：

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

或者：

.image-wrapper {
  float: left;
}
浮点数在这里并不是最好的选择... inline(-block) 更加合适。 - Bert Goethals
更正一下，所有这些都有点起作用。它们修复了它的宽度，但出于某种原因没有修复它的高度。看看页面，它有float：left。 :) - dieki
再次更正：如果我没有声明文档类型，所有这些都可以工作。但是它们不能与HTML5或HTML4文档类型一起使用。 :P - dieki
1

CSS应该...

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

image-wrapper 会自动继承图片的宽度和高度，除非你为 image-wrapper 设置了 overflow 属性。

@snostorm 尝试清除您的历史记录和缓存，看看是否有效。您还可以尝试为 .image-wrapper 类提供硬值。像这样 .image-wrapper {width: 600; height: 200;} 我不知道实际应该是什么值，但这是一种替代方法，但不如使用 @bdparrish 指出的自动调整大小到应该使用的 .image-wrapper {width: 0; height: 0;} 更容易。 - Jem
我总是被缓存的CSS卡住。 - bdparrish
尝试过了，没有改变它。硬编码的值可以工作，但是图像大小是可变的，所以我必须使用一些Javascript。使用width: 0，height: 0，它不会自动调整大小；它只是将高度和宽度设置为零。 - dieki
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接