html - 将容器外图像的左侧拉伸(stretch)到页面边缘

Question

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

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

然后我在容器外有一个图像，旁边有一个 div，图像占据视口(viewport)的 40%，div 占据视口(viewport)的剩余 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。

这是一个我认为 600px 而不是 1400px 的例子:

* {
  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>