用填充的div包裹图像

Question

使用CMS，我网站的用户会创建包含各种尺寸图片的帖子。我想在每个图像周围包装一个容器div，但左边和右边只有10px的填充。也就是说，将外部div的宽度折叠到图像的宽度+ 20px。使用css有一种简单的方法吗？

Answer 1

试试这个：

DEMO

HTML

<div class="image-wrapper">
    <img src="http://placehold.it/500/500" />
</div>

CSS

img{
    max-width: 100%;
}
.image-wrapper{
    padding: 10px;
    background-color: gray;
    float:left;  /*  or instead display:inline-block;  */
}