javascript - html 间距问题-将左边距保持为可变右边距 0

Question

在分辨率为 520-719px 时，之前我将内容固定为 500px 并保持 margin:0 auto。因此对于 700px 的屏幕，内容将为 500px，左边距和右边距各为 100px。 对于600px的屏幕，content是500px，margin left, right各50。 现在，我希望 margin-left 相同 (screenWidth-500)/2 并且 margin right 为 0。中心内容的宽度不再固定，它将是(500+右边距的任何区域) 我怎样才能做到这一点。这可能使用 css 吗？？ 当窗口大小从 520 到 719 像素时，我尝试使用 jquery，我按照 margin-left=(screenWidth-500)/2 和 margin-right:0 进行计算 请提出更好的解决方案。

Answer 1

你可以使用 CSS calc，像这样:

(我使用了一个包装器来模拟一个 600px 的窗口宽度——红色边框)

.your_div {
  width: calc(500px + ((100% - 500px) / 2));
  margin-left: calc((100% - 500px) / 2);
  margin-right: 0;
  background: green;
  height: 300px;
}

.wrapper {
  width: 600px;
  border: 1px dotted red;
}

<div class="wrapper">
  <div class="your_div"></div>
</div>