Question

我有不同宽度的瓷砖列表。所有这些都位于.projects内部，具有自动宽度，并且由另一个div（.wrapper）包裹，其宽度为100％。

<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元件。

如果元素的数量可以放在一行中，它的效果非常好 - ＆gt;比.projects宽度等于内部所有.pro个容器的宽度总和（小提琴中的第一个和第二个例子）。

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

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

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

Answer 1

.projects { 宽度：600px; 保证金：0自动; } [class ^ =“pro”] { display：inline-block; 宽度：20％; 向左飘浮; }

这样的事情应该这样做，基本上项目的边距0自动将它放在屏幕上。

如何将100％宽度包装内的浮动多线div居中？

1 个答案: