How can I make a div *not* expand to fill it's parent?_问答_开发者

How can I make a div *not* expand to fill it's parent?

开发者 https://www.devze.com 2023-03-10 04:54 出处：网络

I have a div wrapped around an image, like this: <div class=\"containing-div\"> <div class=\"image-wrapper\">

相关专题：css layout

I have a div wrapped around an image, like this:

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

Now, I expect image-wrapper to take the size of the image, and no more. But it doesn't; it instead fills to the height of containing-div. (See actual page here: http://holywo开发者_如何学Crlds.org/new_hw/wallpapers.php )

My CSS is:

.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;
}

Now, it works just fine if I don't have a Doctype declared. But everything I've tried fails if I do.

How can I make image-wrapper be the size of the image while still using <!doctype html>?

Have you tried:

.image-wrapper {
  display: inline;
}

Or:

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

Or:

.image-wrapper {
  float: left;
}

CSS should be ...

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

image-wrapper will automatically take on the width and height of the image unless you set the overflow property for image-wrapper.

How can I make a div not expand to fill it's parent?

精彩评论

关注公众号

热门标签

图文推荐