Question

要点很简单，宽度为50％，类似于codepen中显示的上述版本，可以按预期工作，内容位于灰色框顶部所示的假想容器中。使用不均匀的百分比时会出现问题，因此固定的max-width仅适用于固定的窗口宽度。

是否有某种计算公式可以起作用？等等

.uneven {
  .right,
  .left {
    width:65.3%;
    .content {
      max-width:420px;
      margin-left:auto;
    }
  }
  .right {
    width:34.7%;
      .content {
       max-width:180px;
       margin-left:0;
       margin-right:auto;
    }
  }
}

Answer 1

您的容器的大小等于W（在您的示例中为600px），然后我们的完整容器为全屏显示，因此100vw的两侧边距等于{{1 }}，因此您可以简单地在内部元素中使用该边距。

一个小的缺点是(100vw - W) / 2还包括滚动条的宽度，因此使用滚动条时，计算会略有不同：

100vw

body {
  background: #666;
  margin: 0;
}

.container {
  height: 100px;
  background: #888;
  max-width: 600px;
  margin: 0 auto;
}

.full {
  display: flex;
  background: orange;
  height: 45px;
  margin-bottom: 4px;
}

.left {
  width: 50%;
  background: #16CC4A;
}

.left .content {
  margin-left: calc((100vw - 600px)/2);
  border: 1px solid red;
}

.right .content {
  margin-right: calc((100vw - 600px)/2);
  border: 1px solid red;
  text-align: right;
}

.right {
  background: #D98813;
  width: 50%;
}

.uneven .left {
  width: 65.3%;
}

.uneven .right {
  width: 34.7%;
}

@media all and (max-width:600px) {
  .left .content,
  .right .content {
    margin: 0;
  }
}

使两个奇数大小的元素分别位于中心和边缘以对抗想象容器

1 个答案: