如何在 100% 宽度的包装器内居中浮动多行 div？答案

【问题标题】：How to center floating, multiline divs inside of 100% width wrapper?如何在 100% 宽度的包装器内居中浮动多行 div？
【发布时间】：2014-01-31 19:44:36
【问题描述】：

我有不同宽度的瓷砖列表。它们都位于具有自动宽度的.projects 内，并且被另一个具有 100% 宽度的 div (.wrapper) 包裹。

<div class="wrapper">
    <div class="projects">
        <div class="pro p1"></div>
        <div class="pro p2"></div>
        <div class="pro p4"></div>
        <div class="pro p2"></div>
    </div>
</div>

我想让.projects 块居中，但.pro 应该向左浮动，因为我想让图块保持左对齐，所以我不能将display: inline-block; 用于.pro 元素。

如果元素的数量可以容纳在一行中，则效果很好 -> 比 .projects 宽度等于内部所有 .pro 容器的宽度之和（小提琴中的第一个和第二个示例）。

但如果元素数量更大，它们会转到另一行，.projects 容器变为 100% 宽度，而不是内部元素的实际最大宽度。

如果子元素不适合一行而不是上一个示例的效果，是否可以实现 .projects 的宽度而不是 100%？

看代码：http://jsfiddle.net/68U47/2/

【问题讨论】：

使用% 将一些width 分配给.projects，然后使用margin: auto; 将包装器居中
我没有得到这部分“.projects 容器变为 100% 宽度而不是内部元素的实际最大宽度”。如果内部元素填满所有空间，为什么你认为 100% 不是真实宽度？
@Mr.Alien - 是的，它以这种方式工作，对于.pro 宽度和屏幕分辨率的某些情况。 @jonasnas - 请看一下HERE 蓝线是内部元素的实际宽度，绿色是.projects 容器的宽度。

标签： html css

【解决方案1】：

.projects { 宽度：600px；边距：0 自动； } [类^="专业"] { 显示：内联块；宽度：20%；向左飘浮; }

应该这样做，基本上项目上的margin 0 auto会在屏幕上居中。

【讨论】：

是的，但我想要 .projects 的动态宽度而不是固定宽度。
你不能只给它一个最小高度然后让它能够扩展吗？
然后只需将宽度更改为 %。即宽度：60%；另外，inline-block 元素上的浮动不是多余的吗？