Css 如何将栅格和边距与左右边缘对齐 起初的

预期

• 网格1和网格4应对齐
• 网格2和网格5应对齐

使现代化 我将您的宽度略微更改为80%

这似乎不适用于我们

蓝线长度应等于红线（左边距应等于右边距）

这些网格应该居中

但现在他们似乎离左太近了

.container {
    position: relative;
    width: 80%;
    margin: 0 auto;
}    
.box {
    float: left;
    width: 160px;
    height: 80px;
    background: #ccc;
    margin: 20px;
}

---

很简单。您可以在包装容器中创建箱子。下面是一个非常简单的硬宽度示例（不理想）：

.container{
位置：相对位置；
宽度：600px；
保证金：0自动；
}
.盒子{
浮动：左；
宽度：160px；
高度：80px；
背景：#ccc；
利润率：20px；
}

方框1
方框2
方框3
方框4
方框5

发布您正在使用的代码CSS flexbox允许您做什么？您是否希望一行中的所有网格元素具有相同的高度，取决于每行的“最高”网格元素？是的，您的更新不起作用，因为正如我所说，我的示例使用的是硬宽度，而不是百分比。如果要将宽度更改为80%，则需要更改框宽度以反映更改。我的示例只是演示具有相等间距的浮动框。如果您希望它们根据容器宽度做出响应，那么这是完全不同的。如果你知道容器的宽度永远不会改变，那么你可以用一个简单的版本，就像我展示的那样。你知道你的集装箱宽度是多少吗？