Html 多层瓷砖周围的收缩包装div

我一直在尝试制作一个适合其内容的div。我尝试过许多收缩包装方法，但没有一种有效

<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>

及

应用于内部div时失败

---

我希望内部div位于外部div的中心，但内部div的内容必须左对齐。

这里很难回答您的问题，因为我并不100%清楚您想要实现什么。当你说你希望内部div居中时，意味着你的内部div的宽度是固定的，而外部div的宽度是100%，如果我没弄错的话

display:table

肯定不是这里的正确选择。您最有可能使用此选项使子元素具有相同的高度、自动均匀分布它们或进行垂直对齐（顶部、中部、底部）

如果你只想把你的内部div居中，给它一个固定的宽度，我会用自动边距的方法

在内部div上设置一个

max width

，这样您就可以将其限制在某个宽度，并将左右边距设置为auto

这就是你想要达到的目标吗

更新

根据我的评论，我想我现在更了解您想要做什么：-）但是，如果您担心子节点包装后内部div会立即扩展，那么恐怕没有合适的解决方案

如果你看这个例子：

您可以看到，解决方案使用的是内联块元素。这样，当内部容器被视为文本时，您可以将其居中。内部容器的文本align:left将使图像向左对齐。但是，当您的内部容器变得太小，无法容纳所有子节点，并且它们开始包装时，内部容器仍在尝试尽可能大。我认为这是文本溢出的默认行为，您无法更改它。你也可以看看这个例子，我在里面放了很长的词，看到的行为是一样的

干杯

---

Gion

你的问题似乎不太清楚，但我感觉到的是你希望你的内心能够充分发挥。

---

请检查此删除的

显示：表格来自内部div
必须将
.outer
div
设置为block。
.cont
div
只能以定义的宽度居中，然后使用
边距：0 auto
。零是可选的，但是左右边距需要是
auto

我为你做了一个JSFIDLE：

我使用了
字体大小：0.cont
类中添加code>，以便删除内联块元素（如
标记）的空格。
不久前曾问过类似或相同的问题。我能想到的唯一解决方案是使用媒体查询清除浮动并使表收缩包装其内容。这是帖子：这是那篇帖子的提琴：

它们现在不是左对齐了吗？@Ivanov是的，但我需要内部div的宽度来适应内容，而不是像之前问过的一样或相同的问题。我能想到的唯一解决方案是使用媒体查询清除浮动并使表收缩包装其内容。这是帖子：。还有，这是那篇文章的提琴：@DRD谢谢！我该如何给你信用呢？我已经发表了我的评论作为回答。你可以通过这一点给予信任。谢谢。我想我需要澄清一下。我想要的是内部div水平收缩到平铺，当一行中的平铺数量改变时改变宽度。我还希望内部div集中在外部div中。谢谢更新。我意识到这有点徒劳。任何人所做的最好的事情就是DRD对这个问题的评论。这不会收缩以适应内容。
display: table;

display: inline-block;

see jsfiddle;