CSS：将子div宽度自动设置为内容，而不是完整的父宽度

Question

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

在此输入图像描述

灰色部分是我的父div，包装器，红色部分是我的孩子div，gameswrapper。 我希望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

只需使用内联块作为孩子的显示模式...这将取得div的宽度扩展行为:)

Answer 2

您可以通过将#wrapper设置为text-align: center并将#gamesdisplay设置为inline-block的dipslay类型来#gamesdisplay此目的。

这是CSS（包括您的原始CSS）：

#wrapper {
  background: #ddd;
  width: 70%;
  max-width: 70%;
  margin: auto;
  padding: 10px;
  font-family: 'CaviarDreamsBold';
  text-align: center;
}
#gamesdisplay {
  display: inline-block;
  padding: 10px;
}
#searchdisplay {
  display:block;
}

这是一个关于codepen的工作示例：

http://codepen.io/sonnyprince/pen/grvmzj