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

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。

这是我考虑 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>

您也可以margin-right在内部 div 中使用它：

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