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

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的例子：

＆＃13;

＆＃13;

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

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;

您也可以将其用作内部div的margin-right：

＆＃13;

＆＃13;

* {
  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);
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;