Html 我怎样才能使我的包装流血的权利，在一个特定的部分？

对于一个项目，我有一个页面，其中所有内容都在一个包装器中，并且随着屏幕尺寸的增大，我会扩展这个包装器。假设每个盒子都是一个部分

中间部分向右出血，但左侧的边距与包装纸相同。我不知道截面的确切宽度+右边的边距，若我知道，当它缩放时它会改变。我希望左侧在浏览器更改时与其他部分内联缩放，就像在常规包装中一样

.wrapper{
宽度：60雷姆；
保证金：0自动；
}
.第1节{
背景色：黑色；
宽度：100%；
高度：200px；
}
.第2节{
背景颜色：蓝色；
/*这个宽度只是为了显示我想要它的样子*/
宽度：1224px；
高度：200px；
左边距：自动；
}
.第3节{
背景颜色：橙色；
宽度：100%；
高度：200px；
}

---

这就是你想要的吗？ 无论发生什么情况，包装器都将与左侧保持相同的距离。 虽然我不确定你是否希望你的包装在任何时候都在中心（x，y）

CSS

.wrapper{
边框：1px纯绿色；
宽度：100%；
位置：绝对位置；
左：45像素；
}
.第1节{
背景色：黑色；
宽度：100%；
高度：200px；
位置：相对位置；
}
.第2节{
背景颜色：蓝色；
宽度：125%；
高度：200px；
左边距：自动；
位置：相对位置；
}
.第3节{
背景颜色：橙色；
宽度：100%；
高度：200px；
位置：相对位置；
}

---

这就是你想要的吗？ 无论发生什么情况，包装器都将与左侧保持相同的距离。 虽然我不确定你是否希望你的包装在任何时候都在中心（x，y）

CSS

.wrapper{
边框：1px纯绿色；
宽度：100%；
位置：绝对位置；
左：45像素；
}
.第1节{
背景色：黑色；
宽度：100%；
高度：200px；
位置：相对位置；
}
.第2节{
背景颜色：蓝色；
宽度：125%；
高度：200px；
左边距：自动；
位置：相对位置；
}
.第3节{
背景颜色：橙色；
宽度：100%；
高度：200px；
位置：相对位置；
}

在

.section-2

类中添加以下css规则

右边距：calc（50%-50vw）

您还需要将

嵌套到与其他部分相同的

中，以便具有相同的左对齐 如果你想让它向左流血，使用

marginleft:calc（50%-50vw）

而不是

右边距

，或者两者都必须为全宽

这个页面有很多关于在容器中操作边距的好信息。

.wrapper{
宽度：60雷姆；
保证金：0自动；
}
.第1节{
背景色：黑色；
宽度：100%；
高度：200px；
}
.第2节{
背景颜色：蓝色；
高度：200px；
保证金权利：计算（50%-50vw）；
}
.第3节{
背景颜色：橙色；
宽度：100%；
高度：200px；
}

在

.section-2

类中添加以下css规则

右边距：calc（50%-50vw）

您还需要将

嵌套到与其他部分相同的

中，以便具有相同的左对齐 如果你想让它向左流血，使用

marginleft:calc（50%-50vw）

而不是

右边距

，或者两者都必须为全宽

这个页面有很多关于在容器中操作边距的好信息。

.wrapper{
宽度：60雷姆；
保证金：0自动；
}
.第1节{
背景色：黑色；
宽度：100%；
高度：200px；
}
.第2节{
背景颜色：蓝色；
高度：200px；
保证金权利：计算（50%-50vw）；
}
.第3节{
背景颜色：橙色；
宽度：100%；
高度：200px；
}

这很接近，但有一个水平滚动。我想在这个特定的示例中，您可以使用

右边距：calc（50.9%-50vw）这很接近，但有一个水平滚动。我想在这个特定的例子中，你可以使用
右边距：calc（50.9%-50vw）