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

这里很难回答你的问题，因为我并不是100％清楚你要实现的目标。当你说你想让内部div居中时暗示你的内部div将具有固定宽度，而外部div具有100％宽度，如果我让你正确的话。

display: table肯定不是正确的选择。您最有可能使用它来使子元素具有相同的高度，自动分配它们或进行垂直对齐（顶部，中部，底部）。

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

在内部div上设置max-width，以便将其限制在一定宽度，并将左右边距设置为自动。

这是你想要达到的目标吗？ http://jsfiddle.net/ZnER7/1/

<强>更新

根据评论，我认为我现在知道你想要做什么:-)然而，如果你担心你的内部div在子节点包裹后正在扩展的事实那么我恐怕没有适当的解决方案。

如果你看一下这个例子：http://jsfiddle.net/ZnER7/3/

您可以看到解决方案正在使用内联块元素。通过这种方式，您可以将内部容器放在中心位置，因为它会像文本一样对待。内部容器的text-align：left将使图像对齐到左侧。但是，当您的内部容器太小而无法容纳所有子节点并且它们开始换行时，内部容器仍然试图尽可能大。我认为这是文本溢出的默认行为，你无法改变它。您还可以查看我放入很长的单词的示例，并看到行为是相同的。

干杯祗园

Answer 2

你的问题似乎并不清楚，但我认为你希望你的内心div能够延伸到完整的内容。请从内部div

中检查jsfiddle,已移除的display: table;

Answer 3

必须将.outer div设置为阻止。 .cont div只能以定义的宽度居中，然后使用margin: 0 auto。零是可选的，左右边距需要为auto。

我为你做了一个jsfiddle：http://jsfiddle.net/z9xCg/

我在font-size: 0;类上使用.cont，以删除内联块元素（如<img>标记）的空格。

Answer 4

前一段时间被问到类似或相同的问题。我能想到的唯一解决方案是使用媒体查询来清除浮动并使表收缩其内容。这是帖子：Centering a variable width grid while aligning its elements to the left，这里是该帖子的小提琴：http://jsfiddle.net/5hWXw/。

see jsfiddle;

Shrink Wrap div围绕多个瓷砖

4 个答案: