在 css 中将最大宽度与最大宽度边距自动对齐

Question

我正在尝试实现以下div之间的对齐效果。

蓝色框的宽度必须与红色框的宽度相同，而且自动右边距也是如此。这样，如果调整屏幕大小，红色和蓝色将始终对齐。

在CSS中有什么方法可以实现吗？

我尝试在蓝色上应用 margin-left，还显示带有 grid-template-column 的网格：auto 1fr auto；但似乎它不起作用，因为我无法获得自动保证金。

我正在添加一个代码笔来帮助人们看到问题并进行测试。

<div class="centered red"></div>
<div class="centered red"></div>
<div class="right blue"></div>

.centered {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.right {
  margin-left: auto;
  max-width: 1000px
}

div {
  margin-bottom: 10px;
  height : 200px;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

Answer 1

试试这个：

.right {
  margin-left: calc(50% - 250px);
  max-width: 1000px
}

Answer 2

如果您将大小设置为视口大小的一半 (50vw) + 元素大小的一半 (=250px)，您将获得正确的最大宽度 .right 元素。之后，您可以简单地对该元素使用 margin-left: auto，就像您对 .centered 元素使用它一样。

https://codepen.io/thatkookooguy/pen/bGqVPEJ

body {
  margin: 0;
  padding: 0;
  --width: 500px;
  --half-width: calc(var(--width) / 2);
  --height: 50px;
}

.centered {
  max-width: var(--width);
  margin-left: auto;
  margin-right: auto;
}

.right {
  margin-left: auto;
  max-width: calc(50vw + var(--half-width));
}

.shared {
  margin-bottom: 10px;
  height: var(--height);
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

<div class="shared centered red"></div>
<div class="shared centered red"></div>
<div class="shared right blue"></div>

在 css 中将最大宽度与最大宽度边距自动对齐

Align max-width aligned right with max-width margin auto in css

html

css

margin

css-position