Html 具有相等水平边距的左对齐div

我有许多内联块元素希望放在容器div中。随着容器div的大小调整，跨/向上/向下显示的内联块元素的数量会发生变化。我希望使这些div保持左对齐，以便它们看起来像：

XXXXXXX
XXXXXXX
XXX

和不类似：

XXXXXXX
XXXXXXX
  XXX 

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

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

||
||
| 不确定这是否是你想要的。这里的缺点显然是对像素值的依赖。也从
display:inline
切换到
float:left
，这样就不必用间隙和线条高度来控制自己


.block{
浮动：左；
边距：0 5px 5px 0；
宽度：50px；
高度：50px；
背景色：红色；
}
.集装箱{
文本对齐：居中；
边框：1px纯蓝色；
填充物：5px；
}
.左{
文本对齐：左对齐；
边框：1px纯绿色；
保证金：0自动；
最大宽度：220px；/*每行最多四个项目，包括边距*/
溢出：隐藏；/*廉价滑板clearfix*/
填充：5px0.5px；
}
在放弃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>");
                }
            }

        }
    }

函数doLayout（）{
var canfitCross=Math.floor（$（“.container”）.innerWidth（）/$（“.block”）.outerWidth（true））；
var reals=$（“.container.block:not（.false）”）.length；
var fakes=$（“.container.fake”）.length；
如果（（真实+伪造）%CanfitCross！=0）{
$（“.false”）.remove（）；
var neededFakes=CanfitCross-（reals%CanfitCross）；
如果（需要假货！=CanfitCross）{
对于（var i=0；i如果您真的想使用仅CSS的解决方案，我建议您在调整大小期间使用单个项目+媒体查询的中心容器来调整此容器的宽度

正文{
保证金：0；
}
.集装箱{
保证金：0自动；
背景：ddd；
}
@介质（最小宽度：110px）{.container{width:110px；}
@介质（最小宽度：220px）{.container{width:220px；}
@介质（最小宽度：330px）{.container{width:330px；}
@介质（最小宽度：440px）{.container{width:440px；}
@介质（最小宽度：550px）{.container{width:550px；}
@介质（最小宽度：660px）{.container{width:660px；}
@介质（最小宽度：770px）{.container{width:770px；}
@介质（最小宽度：880px）{.container{width:880px；}
@介质（最小宽度：990px）{.container{width:990px；}
.项目{
浮动：左；
宽度：100px；
高度：100px；
背景：红色；
保证金：5px；
}
.货柜：之后{
内容：''；
显示：块；
清除：左；
}



您也可以在上访问此演示

与其调整容器宽度的大小（这会导致左/右边距的变化），您还可以为项目边距或宽度设置百分比值。基本上，这里的问题是您希望动态值是什么：


可变容器边距（参见演示）
可变项目保证金
可变项目宽度

这一切都可能仅通过CSS实现。
我似乎记得这个问题以前出现过很多次，我不记得曾经见过CSS解决方案……但可能与@Paulie_D flexbox？重复，但浏览器支持有限。我记得使用jQuery/JavaScript解决过类似问题。@MarcAudet我不记得flexbox解决方案……我会看看我能做些什么find.Perfect适用于正好4个横截面，但仍然没有响应。容器可能会假定最大宽度，但必须适用于指定最大.Hm的任何尺寸。您所说的响应到底是什么意思？block
是您示例中给定的定义像素值吗？您希望
最大宽度
是一个百分比吗？猜猜，我没有fully掌握了你想要实现的目标。你能指定一个我的答案没有涵盖的用例吗？缩小你的窗口，这样只有3个红色框可以穿过。你会注意到右侧有一个很大的间隙，但左侧仍然与之完美贴合。左侧的边框..块被定义为像素值，但.container（and.left）是必须能够保持布局，同时被调整大小。真棒的解决方案。这正是我所寻找的。