CSS 将 div 环绕在图像周围
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15611341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Wrap div around image
提问by Youss
I have a div around an image like this:
我在这样的图像周围有一个 div：
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
The result is that the div is bigger than the image. I would like to wrap it around the image giving it the same height and width (without setting dimension)
结果是div比图像大。我想将它包裹在图像周围，使其具有相同的高度和宽度（不设置尺寸）
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:100%;
height:100%;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
I tried height and width 'auto' but it also doesn't work.
我尝试了高度和宽度“自动”，但它也不起作用。
回答by Joonas
回答by Henk Kroon
Set the margin and padding of the div to zero:
将 div 的边距和填充设置为零：
div.q{
margin:0;
padding:0;
}
回答by Nayana Adassuriya
Here yo go
给你
<html>
<head>
<style type="text/css">
img {
z-index: -1;
position: relative;
width:300px;
}
.q {
width:300px;
box-shadow:inset 0px 0px 85px red;
-webkit-box-shadow:inset 0px 0px 85px red;
-moz-box-shadow:inset 0px 0px 85px red;
}
</style>
</head>
<body>
<div class="q">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" />
</div>
<body>
</html>
回答by user3736786
I found this method the easiest,
我发现这个方法最简单，
<div style="display:inline-block">
<p style="float: left; padding-left: 20px">
<img src="Images/user.png" style="height: 200px; width: 207px" />
</p>
<h4 style="text-align: center">Client Zone</h4>
<p>So, he played with that child, the whole day long, and they were very merry.</p>
</div>
This example has text in it but, even if you take the <h4>and last <p>tag the
此示例中包含文本，但是，即使您使用 the<h4>和 last<p>标记
<div style="display:inline-block;" >
The "display:inline-block;" ensures the whole image gets wraped within the <div>tag.
“显示：内联块；” 确保整个图像被包裹在<div>标签中。
