CSS: Сделать дочерний div шириной автоматически до содержания в нем, а не полной ширины родителя

Question

У меня возникли проблемы с моим css. Извините за заголовок, я не слишком уверен, как объяснить это в нескольких словах, но вот он. Это проблема, которую я испытываю. У меня есть родительский div-оболочка, и он выровнен по центру страницы. Внутри этого div у меня есть еще один div, и этот div содержит изображения в нем. Проблема в том, что у меня есть дочерний div, установленный на width: auto, а ширина всегда является полной длиной родительского div. Я хочу, чтобы он масштабировался так же сильно, как содержимое внутри него, поэтому я могу сосредоточить его в родительском div. Вот картина того, что я имею в виду.

enter image description here

Серая часть моего родительского 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 тип dipslay inline-block.

Вот 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