改变窗口宽度时在屏幕外推动一个元素

Question

我有绝对位于屏幕左侧的方形div。在达到某个视口宽度后，我怎样才能不断向左推它？我唯一的想法是通过javascript添加resize事件监听器，并计算left元素的属性为负值。

.container { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
} 
 

 
.element { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100vh; 
 
    height: 100vh; 
 
    background-color: lightblue; 
 
}

<div class="container"> 
 
    <div class="element"></div> 
 
</div>

Answer 1

我不知道我理解你的问题。如果你只是想要一个元素坚持到左边，那么你的代码是完全正确的。

如果你的目标是要提出的是，使其只具有一定的屏幕宽度坚持，那么我建议你看看css media

截至去年，如果你想这个元素最终“汇”在左边框，因此在窗口外，我建议你使用CSS媒体和css calc function的组合。

希望这有任何帮助！