我需要靠右靠齊#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: calc(50% - 420px); }

如果您想让 `#main` 元素靠右对齐，可以将 `left` 属性的值改为 `auto`，同时将 `right` 属性的值设置为 `0`。这样，`#main` 元素就会紧贴屏幕右侧。新的代码如下所示：

#main {
  height: 500px;
  overflow-y: scroll;
  max-width: 100%;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
}

请注意，如果您希望 `#main` 元素与屏幕右侧留出一定的空白，可以通过调整 `padding-right` 属性的值来实现。

相关问题

#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; left: calc(50% - 430px); }

如果您想让 `#main` 元素在屏幕中间留出 210 像素的空白，可以将 `left` 属性的值改成 `calc(50% - 550px)`，其中 `550px` 是 `#main` 元素的宽度加上 210 像素的一半。这样，`#main` 元素就会在屏幕中间留出 210 像素的空白。新的代码如下所示：

#main {
  height: 500px;
  overflow-y: scroll;
  max-width: 100%;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: fixed;
  top: 0;
  left: calc(50% - 550px);
}

请注意，您需要根据 `#main` 元素的实际宽度和屏幕宽度来调整 `calc()` 函数中的数值。如果您的 `#main` 元素的宽度为 860 像素，则需要将 `550px` 更改为 `(860px + 210px) / 2 = 535px`，即 `calc(50% - 535px)`。

左邊我需要留出210px#main { height: 500px; overflow-y: scroll; max-width: 100%; margin: auto; padding: 20px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.1); position: fixed; top: 0; right: 0; }

如果您想要让 `#main` 元素在屏幕中间留出 210 像素的空白，可以使用 `calc()` 函数来计算 `left` 属性的值。具体来说，您可以将 `left` 属性的值设置为 `calc(50% - 560px)`，其中 `560px` 是 `#main` 元素的宽度加上 210 像素的一半。这样，`#main` 元素就会在屏幕中间留出 210 像素的空白。新的代码如下所示：

#main {
  height: 500px;
  overflow-y: scroll;
  max-width: 100%;
  margin: auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
  position: fixed;
  top: 0;
  left: calc(50% - 560px);
}

请注意，`calc()` 函数只能在 CSS3 中使用，如果您需要支持较旧的浏览器，请考虑使用其他方法来实现相同的效果。