html - 围绕多个图 block 收缩包裹 div

Question

我一直试图让一个 div 适合它的内容 here .我尝试了很多收缩包装方法，但没有一个奏效。

<div class="outer">
    <div class="cont">
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
        <img src="http://www.placehold.it/100" />
    </div>
</div>

两者

display: table;

和

display: inline-block;

应用于内部 div 时失败。

我希望内部 div 在外部 div 中居中，但内部的内容保持对齐。

Answer 1

不久前有人问过类似或相同的问题。我能想出的唯一解决方案是使用媒体查询来清除 float 并使表收缩包装其内容。这是帖子:Centering a variable width grid while aligning its elements to the left这是该帖子的 fiddle :http://jsfiddle.net/5hWXw/ .

see jsfiddle;