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

Question

在520-719px分辨率中，我早先将内容固定为500px并保持边距：0自动。对于700px屏幕，内容将为500px，剩余边距为100px。 对于600px屏幕，内容为500px，左边距，右边为50。 现在，我想要margin-left（screenWidth-500）/ 2和margin right为0.中心内容的宽度不再固定，它将是（500 +右边距的任何区域） 我怎样才能实现这一点。这可能使用css。?? 我尝试使用jquery，因为当窗口大小从520到719像素时，我做计算为margin-left =（screenWidth-500）/ 2和margin-right：0 请提出更好的解决方案。

Answer 1

您可以使用CSS calc，如下所示：

（我用一个包装器来模拟一个600px的窗口宽度 - 红色边框）

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;