左对齐的div，水平间距相等

Question

我有一些内联块元素，我希望将它们放在一个容器div中。当容器div被重新调整大小时，横向或纵向出现的内联块元素数量会改变。我希望保持这些div左对齐，以便它们看起来像：

XXXXXXX
XXXXXXX
XXX

而不是像：

XXXXXXX
XXXXXXX
  XXX 

但需要保持左右边距相等。因此，最左和最右的div始终与容器的边缘等距离：

|<-XXXXXXX->|
|<-XXXXXXX->|
|<-XXX      |

我该如何使用纯CSS实现这个效果？

http://jsfiddle.net/e818rfum/

- ReallyMadeMeThink

---

我似乎记得这个问题以前出现过很多次，但我不记得曾经看到过CSS的解决方案... - Paulie_D

我记得使用 jQuery/JavaScript 解决过类似的问题。 - Marc Audet

每行定义的块数是否有最大限制？或者是内部容器（.left）有最大宽度？只是问一下，因为我无法看到何时应用这些相等的边距的条件。 - maryisdead

我觉得用一个包含 width: 80% 和 margin: 0 auto; 的包装器 div 来包裹你的左对齐 div，可能会接近你上面的小文本演示。你试过这样做吗？http://jsfiddle.net/e818rfum/4/ - robabby

@robabby 我会仔细看一下，但只是因为边距的绝对差异已经减小了，但问题仍然存在。 - ReallyMadeMeThink

Answer 1

如果你真的想采用纯CSS的解决方案，我建议你使用一个居中的容器来放置单个项目，并使用媒体查询来在调整大小时调整该容器的宽度。

body {
    margin: 0;
}

.container {
    margin: 0 auto;
    background: #ddd;
}

@media (min-width: 110px) { .container { width: 110px; } }
@media (min-width: 220px) { .container { width: 220px; } }
@media (min-width: 330px) { .container { width: 330px; } }
@media (min-width: 440px) { .container { width: 440px; } }
@media (min-width: 550px) { .container { width: 550px; } }
@media (min-width: 660px) { .container { width: 660px; } }
@media (min-width: 770px) { .container { width: 770px; } }
@media (min-width: 880px) { .container { width: 880px; } }
@media (min-width: 990px) { .container { width: 990px; } }

.item {
    float: left;
    width: 100px;
    height: 100px;
    background: red;
    margin: 5px;
}

.container:after {
    content: '';
    display: block;
    clear: left;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

您还可以在 JSFiddle 上访问此演示。

与调整容器宽度（导致左/右边距不同）不同，您还可以为项目边距或宽度使用百分比值。这基本上是关于您希望在此处使用动态值的问题：

- 可变容器边距（请参阅演示） - 可变项目边距 - 可变项目宽度

这一切都可以仅通过 CSS 实现。

- Patrick Rudolph

---

太棒了，这正是我在寻找的解决方案。 - ReallyMadeMeThink

Answer 2

在放弃CSS之后，我拼凑了这段非常丑陋的jQuery代码来实现我想要的效果。将其发布在这里只是为了澄清期望的行为。

function doLayout(){
        var canFitAcross = Math.floor($(".container").innerWidth()/$(".block").outerWidth(true));
        var reals = $(".container .block:not(.fake)").length;
        var fakes = $(".container .fake").length;
        if((reals+fakes)%canFitAcross!=0){
            $(".fake").remove();
            var neededFakes = canFitAcross-(reals%canFitAcross);
            if(neededFakes!=canFitAcross){
                for(var i=0;i<neededFakes;i++){
                    $(".container").append("<div class='block fake'></div>");
                }
            }

        }
    }

在这里，我完全放弃了.left。取而代之的是使用“假”的（为演示目的visibility:hidden, opacity:0.5）.block元素来获得所需的左对齐。

演示在这里：http://jsfiddle.net/mgx37q5m/

仍然希望有某种CSS解决方案...

- ReallyMadeMeThink

Answer 3

不确定这是否是您想要的。 显然，这里的缺点是依赖于像素值。 为了避免让自己受到间隙和行高的困扰，还从display:inline切换到了float:left。

.block{
    float:left;
    margin: 0 5px 5px 0;
    width:50px;
    height:50px;
    background-color: red;
}
.container{
    text-align:center;
    border: 1px solid blue;
    padding:5px;
}
.left{
    text-align:left;
    border: 1px solid green;
    margin: 0 auto;
    max-width: 220px; /* Max. four items per row, margins included */
    overflow: hidden; /* Cheap-skate clearfix */
    padding: 5px 0 0 5px;
}

<div class="container">
    <div class="left">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

({{link1：JSFiddle}})

。

- maryisdead

---

非常适合于恰好4个的设定，但仍然无法响应式。容器可以假定最大宽度，但必须适用于任何尺寸，直到指定的最大尺寸。 - ReallyMadeMeThink

嗯，你所说的“响应式”具体是什么意思？在你的示例中，.block是一个定义好的像素值吗？你想让max-width成为一个百分比吗？我猜我还没有完全理解你想要实现什么。你能指定一个我的答案没有涵盖的用例吗？ - maryisdead

缩小窗口，使得只有3个红色框框能够横向放置。你会注意到右侧有一个大的空隙，但左侧仍然与.left的边框完美贴合。.block被定义为像素值，但.container（和.left）必须能够在调整大小时保持布局不变。 - ReallyMadeMeThink