CSS布局难题：图片左延至页面边缘，Inner Div对齐容器右边界

这个问题的核心是当视口宽度超过1400px时，.right的60%宽度会超出上方居中容器的右边界，我们需要通过精准计算来限制.inner的最大宽度，让它刚好对齐到.container的右边缘。

方案1：使用calc()直接计算最大宽度 #

直接给.inner设置max-width，配合可选的对齐样式：

div.container {
  max-width: 1400px;
  margin: 0 auto;
  /* 可选：添加背景色方便观察布局 */
  background: red;
  height: 50px;
}
img {
  display: inline-block;
  width: 40%;
  vertical-align: top; /* 消除inline-block元素间的默认空白间隙 */
}
div.right {
  display: inline-block;
  width: 60%;
  vertical-align: top;
}
div.inner {
  max-width: calc(10vw + 700px); /* 关键计算逻辑 */
  margin-left: auto; /* 让.inner右对齐到容器边缘，不需要左对齐可删除 */
  /* 可选：添加背景色方便观察 */
  background: pink;
  height: 100px;
}

原理说明：

• 当视口宽度>1400px时：.container的右边缘距离视口左边界的位置是 50vw + 700px（容器居中，一半宽度为700px），而.right从视口左边界40vw的位置开始，所以.inner的最大宽度就是 50vw +700px -40vw = 10vw +700px，刚好对齐容器右边缘。
• 当视口宽度<=1400px时：10vw +700px的计算结果刚好等于1400px的60%（840px），完全匹配.right的宽度，不会出现溢出。

方案2：使用CSS变量（更易维护） #

如果后续需要修改容器的最大宽度，用CSS变量可以避免重复计算，提升可维护性：

:root {
  --container-max-width: 1400px;
}
div.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  background: red;
  height: 50px;
}
img {
  display: inline-block;
  width: 40%;
  vertical-align: top;
}
div.right {
  display: inline-block;
  width: 60%;
  vertical-align: top;
}
div.inner {
  max-width: calc(10vw + (var(--container-max-width) / 2));
  margin-left: auto;
  background: pink;
  height: 100px;
}

以后只需要修改:root里的--container-max-width值，所有相关计算都会自动更新，非常省心。

额外提示 #

我在img和.right里加了vertical-align: top，这是为了消除inline-block元素之间默认的空白间隙，避免布局总宽度意外超出100%的问题。

内容的提问来源于stack exchange，提问作者MrCarrot