Css 用容器两侧隔开浮动元件

我有浮动的元素，基本上是作为一个网格来布置的，我想让它们与容器的左右两侧齐平，同时保持内部分离

下面是一个示例，其中红色方块是浮动的50x50 div，在具有固定宽度和自动高度的蓝色div内有10个像素的间隔

这里有一个相关的提琴：

我想让红色方块与蓝色方块的左右两边完全齐平。蓝色方块可以有多种宽度，红色方块可以添加或隐藏，因此第n个类型选择器修改特定红色方块上的边距是不实际的

---

这可以通过给蓝色方块一个负的右填充来解决，但是CSS规范由于一些未指定的原因不允许负填充，所以现在我被卡住了。我看不出任何人怎么能证明允许负边距但不允许负填充

这里是一种使用内联块而不是浮动元素实现布局的方法

首先，在包含块的

.blue

中，设置以下CSS属性：

文本对齐：justify

和

行高：0

其次，对于

.red

子元素，删除

float

属性并添加

display:inline块

结果是，

.red

元素现在是内联的，并且将在

.blue

容器的宽度内均匀地排成一行。由于您为

.blue

硬编码了一个很好的宽度值，因此您将获得

.red

块之间所需的水平间距（无需设置右边距）

text align:justify

的另一个问题是，最后一行不会拉伸以填充整个宽度（这就是justify设置的工作原理，以防止短行以丑陋的方式拉伸）

要解决此问题，请添加一个伪元素

.blue:after

，它是一个宽度为100%的内联块。这将强制在红色块后创建新行，结果是所有红色块都是左/右对齐的

上的
行高：0
。蓝色
和
上的
垂直对齐：顶部
。蓝色：在
之后，请注意底部因行距（文本基线上方和下方的空间）而产生的任何额外空白


.blue{
边缘顶部：10px；
背景色：#00A2E8；
高度：自动；
溢出：自动；
垫底：10px；
文本对齐：对齐；
线高：0；
}
蓝：之后{
内容：''；
显示：内联块；
宽度：100%；
垂直对齐：顶部；
}
瑞德先生{
背景色：红色；
宽度：50px；
高度：50px；
显示：内联块；
边缘顶部：10px；
}
以下是一种使用内联块而不是浮动元素实现布局的方法

首先，在包含块的
.blue
中，设置以下CSS属性：
文本对齐：justify
和
行高：0

其次，对于
.red
子元素，删除
float
属性并添加
display:inline块

结果是，
.red
元素现在是内联的，并且将在
.blue
容器的宽度内均匀地排成一行。由于您为
.blue
硬编码了一个很好的宽度值，因此您将获得
.red
块之间所需的水平间距（无需设置右边距）

text align:justify
的另一个问题是，最后一行不会拉伸以填充整个宽度（这就是justify设置的工作原理，以防止短行以丑陋的方式拉伸）

要解决此问题，请添加一个伪元素
.blue:after
，它是一个宽度为100%的内联块。这将强制在红色块后创建新行，结果是所有红色块都是左/右对齐的

上的
行高：0
。蓝色
和
上的
垂直对齐：顶部
。蓝色：在
之后，请注意底部因行距（文本基线上方和下方的空间）而产生的任何额外空白


.blue{
边缘顶部：10px；
背景色：#00A2E8；
高度：自动；
溢出：自动；
垫底：10px；
文本对齐：对齐；
线高：0；
}
蓝：之后{
内容：''；
显示：内联块；
宽度：100%；
垂直对齐：顶部；
}
瑞德先生{
背景色：红色；
宽度：50px；
高度：50px；
显示：内联块；
边缘顶部：10px；
}

请您添加一张关于所需输出的额外图像，好吗？问题和小提琴中链接了所需输出图像。Stackoverflow不允许我将其包含在内。你能添加一个额外的图像，关于你想要的输出吗？想要的输出图像在问题和小提琴中链接。Stackoverflow不允许我将其包含在内。干净利落的解决方案！我不会想到的。干得好，很好的解决方案！我不会想到的。干得好。
<div class='blue' style='width: 110px'>
    <div class='red'></div>
    <div class='red'></div>
</div>

<div class='blue' style='width: 110px'>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
</div>

<div class='blue' style='width: 170px'>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
    <div class='red'></div>
</div>