Question

我正在尝试通过两个相邻的HTML框实现以下目标：

右侧框中的文本应为300像素宽，并始终粘贴在右侧。
左侧框应填写浏览器的其余宽度（即支持窗口大小调整）。
图像应在左侧框中水平居中。
图像应自动缩放以填充整个浏览器高度。
图像位置应固定，即。向下滚动页面时不会滚动。

但是，在当前版本中，我必须手动为图像框指定高度/宽度（笑！），并且当我更改浏览器宽度时，文本会跳来跳去。我只是不擅长这个。

获得所需结果的最简单，最直接的方法是什么？

<style>
  body {
    margin: 0;
  }
  .left {
    float: left;
    width: 700px; /* BAD */
    height: 700px; /* BAD */
    background-image: url("image.jpg");
    background-attachment: fixed;
    background-position: center top;
  }
  .right {
    float: right;
    width: 300px;
    padding: 0 8px 0 8px;
  }
</style>

<div class="wrapper">
<div class="left"></div>
<div class="right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>

Answer 1

要固定左侧的图像，您需要将容器固定到窗口，因此添加position：fixed;。然后，只需使用各个方向的坐标来填充左侧，但在右侧保留300px-左侧：0，顶部：0，底部：0，右侧：300px。为了使图像充满容器，请添加background-size。您可以使用覆盖物始终填充容器的高度和宽度，也可以仅使用“自动100％”填充容器高度的100％。我在您的右侧元素中添加了box-sizing：border-box，这样它就不会将300px的宽度和填充物相乘，从而使总数超过300px并与左侧发生碰撞。

.left {
  position: fixed;
  right: 300px;
  top: 0;
  bottom: 0;
  left: 0;
  background-image: url("//placehold.it/1000x1000");
  background-position: center;
  background-size: cover;
}
.right {
  float: right;
  width: 300px;
  padding: 0 8px 0 8px;
  box-sizing:border-box;
}

我为示例创建了一个小提琴：https://jsfiddle.net/7v18eyL2/8/

固定在滚动文本列旁边的图像

1 个答案: