How can I make a div *not* expand to fill it's parent?
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.
加载中,请稍侯......
精彩评论