Question

如果列表中有多个块项，我想知道是否有办法获取

左边的0边距，
右边的0边距，
中间项目之间的边距

现在，对于列表中的项目，我只知道如何执行此操作margin:0px 5px 5px 0px;

这样左边没有边距，所以它匹配我的容器的左边，但是最右边的列总是有5px空间...但是我需要margin-right 5px来获取空间我的物品。

有什么建议吗？

div.container{
    width:calc(100% - 100px);
    margin: 0 auto;
    height:100%;
    display:block;
    background:black;
}

div div{
    height:200px;
    width:160px;
    display:inline-block;
    background:grey;
    margin:0px 5px 5px 0px;
}

参考：http://jsfiddle.net/Ly2M3/1/

我再次希望我的物品能够抵达容器的最左侧和右侧，但也有边缘来分隔物品。

Answer 1

是的，将text-align: justify添加到div.container元素。

Answer 2

我正在做另一个答案，因为它可以很好地将divs居中，并且它也匹配最后一行的div！

需要了解您正在使用的内容，但如果您需要支持多种分辨率，某些媒体查询可以帮助您删除一些额外的空间。

你需要两件事： *文本理由（如Josh Rutherford所说）对齐除了最后一行和第二行之外的所有行 *一些不可见的div用于填充行的其余部分，以便浏览器可以将最后一行的div与其余行匹配

结果如下：http://jsfiddle.net/wBe4F/1/，调整大小以便您可以看到最后一行始终与其他行匹配，无论是否有1,2,3,4或5个div，它们始终匹配。

所以，想法是添加额外的高度为0px的div来填充另一行，这样浏览器也会证明它是正确的，所有可见的div都会对齐。

你只需要考虑多少＆＃34; .extra＆＃34;你放在最后的divs。我会把足够的.extra div用于覆盖你想要支持的最宽屏幕尺寸的完整系列，然后你可以添加媒体查询来隐藏不需要的.extra div，如果它们在你的容器div底部留出太多的额外空间（背景颜色可以显示出来）。将其调整得足够小，您将看到所有不需要的.extra div创建的原始div下面的所有空间。你可以给每个.extra div和＆＃34; display：none;＆＃34;其中一些如果分辨率小于某些值则保持控制。

要使额外的div与原始div的宽度相同，只需将它们添加到原始的divs声明中：

.data, .extra {
    display: inline-block;
    width: 120px;
    height: 40px;
    background: #666;
}

然后稍微调整它们以使它们不可见

.extra {
    height: 0px;
}

完美的左/右填充列

2 个答案: