javascript - CSS:使子div宽度自动适应其中的内容，而不是完整的父宽度

Question

我的 CSS 遇到一些问题。抱歉，我不太确定如何用几句话来解释它的标题，但就是这样。这就是我遇到的问题。我有一个包装父 div，它与页面的中心对齐。在该 div 内，我有另一个 div，该 div 中包含图片。问题是我将子 div 设置为 width:auto，并且宽度始终是父 div 的全长。我想要的是它自动缩放到与其中的内容一样大，这样我就可以将它放在父 div 中居中。这是我的意思的图片。

enter image description here

灰色部分是我的父 div、包装器，红色部分是我的子 div、gamewrapper。我希望 gameswrapper 与其中的游戏图片大小相同

这是我的CSS

#wrapper {
background: #ddd;
width: 70%;
max-width: 70%;
margin: auto;
padding: 10px;
font-family: 'CaviarDreamsBold';
}
#gamesdisplay {
    display:block;
}
#searchdisplay {
    display:block;
}
.artwork {
margin: 6px;
width: 150px;
height: 230px;  
background: #666;
display: inline-block;
cursor: pointer;
}

这是我的 html

<div id="wrapper">
<div id="gamesdisplay" style="overflow:auto; width:auto; background:red;">
<a href=''><div class="artwork" style="background: url('')"></div></a>

有人知道如何解决这个问题吗？

Answer 1

我会做这样的事情:

https://jsbin.com/tohuluzehu/edit?html,css,output

只需使用 inline-block 作为子级的显示模式...这将消除 div 的宽度扩展行为:)