在容器外部将图像的左侧拉伸到页面边缘 [英] Stretch left side of image outside container to edge of the page

问题描述

通常我非常擅长CSS，但是我不知道如何进行这种特殊的布局。

Normally I'm quite good at CSS but I cannot figure out how to do this particular layout.

我有一个容器，最大宽度为1400像素。左边缘和右边缘设置为 auto ，因此，当视口超过1400像素时，容器将居中。

I have a container with a maximum width of 1,400 pixels. The left and right margin are set to auto so when the viewport is above 1,400 pixels the container is centralised.

然后，我在容器外部有一个图像，旁边有一个div，该图像占据了视口的40％，div占据了视口的其余60％​​。

I then have an image outside the container with a div next to it, the image occupying 40% of the viewport, the div taking up the remaining 60% of the viewport.

我想要的是在60％的部分内放置一个div，该宽度不会比上面的1,400像素容器的右边缘宽。

What I want, is a div inside the 60% portion, that doesn't go any wider than the right-hand edge of the 1,400 pixel container above.

A图可能会使事情变得更清楚：

A diagram might make things clearer:

< img src = https://i.stack.imgur.com/ig5md.png alt =在此处输入图片描述>

我的CSS到目前为止：

My CSS so far:

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 的变化，但无济于事。为了澄清起见，除粉红色框外，布局上的所有内容都很好，我无法与红色框的右边缘对齐。

For div.inner I've tried variations of percentages and calc but to no avail. For clarification, everything on the layout is fine apart from the pink box which I cannot get to line up with the right-hand edge of the red box.

推荐答案

由于红色div的最大宽度为 1400px ，因此剩余空间为 100vw-1400px ，所以一侧的空间将是一半。您可以简单地将绿色框的填充右移设置为（100vw-1400px）/ 2 50vw-700px 。

Since the red div has a max-width of 1400px then the space left will be 100vw-1400px so the space on one side will be the half. You can simply make the padding-right of the green box to be (100vw - 1400px)/2 which is also 50vw - 700px.

在此示例中，我考虑使用600px而不是1400px：

Here is an example where I consider 600px instead of 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：

You can also use it as margin-right of the inner 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>

这篇关于在容器外部将图像的左侧拉伸到页面边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！