Question

我有以下HTML代码

<div id="container">
    <div id="fixed">Logo</div>
</div>

然后是以下CSS代码

#container {
    width: 400px;
    border: 1px solid red;
    float:right;
}

#fixed {
    float:left;
    width: 200px;
    border: 1px solid green;
}

当我调整窗口大小时，我希望固定的div在窗口边缘处于开始位置时继续向右移动。

您是否知道使用CSS，javascript或HTML执行此操作的方法？

我在jsfiddle中创建了一个示例，您可以在http://jsfiddle.net/alvarezskinner/kRrdb/中查看它，如果您调整中间条的大小，您将看到固定图层保持静止。

Answer 1

我认为这并不是你想要的，但它至少会更接近。将container样式更改为：

#container {
    width: 100%;
    border: 1px solid red;
    float:right;
    max-width:400px;
}

而不是移动fixed div，这只会确保container不会超过页面，从而确保fixed div不会过去页面左侧。这会运作得好吗？

如果你需要它，这是一个小提琴：http://jsfiddle.net/jdwire/kRrdb/2/

Answer 2

如果容器调整大小是不可接受的，你可以使用javascript：

执行类似的操作

window.onresize = function(event) {
    var fixed = document.getElementById("fixed");

    var winWidth = window.innerWidth;
    var containerWidth = document.getElementById("container").offsetWidth;
    var fixedWidth = document.getElementById("fixed").offsetWidth;

    var overlap = containerWidth - winWidth;

    if(overlap > 0) {
        // prevent the element from moving off-screen
        overlap = Math.min(overlap, fixedWidth);
    }else{
        overlap = 0;  
    }

    fixed.style.marginLeft = overlap + "px";
}

http://jsfiddle.net/kRrdb/4/

这可以更简洁。我已经扩展到更容易理解。

调整窗口大小时移动图层

2 个答案: