将容器外图像的左侧拉伸到页面边缘

Question

通常我很擅长 CSS，但我不知道如何做这个特定的布局。

我有一个最大宽度为 1,400 像素的容器。左右边距设置为auto，因此当视口高于 1,400 像素时，容器居中。

然后我在容器外有一个图像，旁边有一个 div，图像占据了 40% 的视口，div 占据了剩余的 60% 的视口。

我想要的是 60% 部分内的 div，它不会比上面 1,400 像素容器的右侧边缘更宽。

图表可能会让事情更清楚：

到目前为止我的 CSS：

div.container {
  max-width: 1400px;
  margin: 0 auto;
}

img {
  display: inline-block;
  width: 40%;
}

div.right {
  display: inline-block;
  width: 60%;
}

div.inner {
  ???
}

对于div.inner，我尝试了百分比和calc 的变化，但无济于事。为了澄清起见，布局上的所有内容都很好，除了我无法与红色框的右侧边缘对齐的粉红色框。

Answer 1

由于红色 div 的最大宽度为 1400px，因此剩余空间将为 100vw-1400px，因此一侧的空间将是一半。您可以简单地将绿色框的padding-right 设置为(100vw - 1400px)/2，这也是50vw - 700px。

这是一个我考虑使用 600 像素而不是 1400 像素的示例：

* {
  box-sizing:border-box;
}
body {
  margin:0;
}

div.container {
  max-width: 600px;
  margin: 0 auto;
  background:red;
  height:50px;
}

img {
  display: inline-block;
  width: 40%;
  height:50px;
  background:yellow;
}

div.right {
  display: inline-block;
  width: 60%;
  padding-right:calc(50vw - 300px);
  background:green;
}

div.inner {
  background:blue;
  height:50px;
}

<div class="container">
</div>
<img src="" ><div class="right">
<div class="inner">
</div>

</div>

你也可以用它作为内部div的margin-right：

* {
  box-sizing:border-box;
}
body {
  margin:0;
}

div.container {
  max-width: 600px;
  margin: 0 auto;
  background:red;
  height:50px;
}

img {
  display: inline-block;
  width: 40%;
  height:50px;
  background:yellow;
}

div.right {
  display: inline-block;
  width: 60%;
  background:green;
}

div.inner {
  background:blue;
  height:50px;
  margin-right:calc(50vw - 300px);
}

<div class="container">
</div>
<img src="" ><div class="right">
<div class="inner">
</div>

</div>