在调整大小时将元素保持在窗口的水平点上答案

【问题标题】：Keep element on horizontal point on window on resize在调整大小时将元素保持在窗口的水平点上
【发布时间】：2019-09-07 20:47:59
【问题描述】：

我有两个元素，一个是容器，宽度 1245px，相对位置和相对于窗口居中（灰色背景不透明度 0.3）二是绝对div（#grey-left），简单的矩形，必须在container后面，必须定位在window的左边，element的右点必须在container后面。

为了简化...这两个元素交互的矩形宽度必须始终相同，无论窗口大小如何！而且因为容器宽度是固定的，所以 #grey-left 必须相对于窗口宽度改变宽度。

如果不是 jQuery，是否可以使用 CSS。

代码：

#grey-left{
    height: 420px;
    top: 84px;
    left: 0px;
    position: absolute;
    width: ?? ;
}

#container {
    position: relative;
    margin: 0 auto;
    width: 1245px;  
}

【问题讨论】：

你能在这里提供一个活生生的例子吗？ jsfiddle.net
jsfiddle.net/28N5z/1 注意#grey-left div的宽度，不应该是固定的。在交叉点创建的“矩形”的宽度应该是。
我不明白预期的输出是什么。你能画一张图来说明 div 应该如何定位吗？
postimg.org/image/54x4z5qvd 希望对您有所帮助 :) ty 红色文本宽度是在调整大小时不会改变的宽度。容器宽度也不应该改变......只有#grey-left是可调整大小的。

标签： jquery css window-resize

【解决方案1】：

这是我的做法，无需借助 JS：

http://jsfiddle.net/28N5z/3/

HTML

<div id="grey-left">
    <div class="wrapper">
        Perhaps you want some content in here?
    </div>
</div>
<div id="container"></div>

CSS

html, body {
    overflow-x: hidden;
}

#container {
    width: 1245px;
    height: 800px;
    background-color: #ddd;
    opacity: 0.6;
    margin: 0px auto;
    position: relative;
}
#grey-left {
    width: 1000px;
    position: absolute;
    top: 80px;
    right: 50%;
    margin-right: 500px;
    height: 200px;
    background-color: #e5e5e5;
}
#grey-left .wrapper {
    width: 200px;
    position: absolute;
    right: 0;
    top: 0;
}

基本技巧是给#grey-left 一个较大的宽度，并将其偏移到窗口的中心。然后，您需要使用overflow-x: hidden 隐藏水平溢出以避免滚动条。

如果您不需要其中的任何内容，您可以删除.wrapper 及其样式。

【讨论】：

太好了，做到了！谢谢。