响应性divs问题 - 一个div固定，第二个响应固定边际

Question

我试图理解响应式div的情况，但我遇到了一个问题。

只要整个东西大约100％div的宽度，这不是什么大问题。但我发现很难添加一些额外的功能。

这是我的小小提琴：

[https://jsfiddle.net/yqh31d7v/][1]

我想要获得的效果是修复侧边栏的宽度（除非我将其定义为没有）并且仅缩小蓝色div维持固定边距 - 左边为20px。

我试图用％设置宽度，但它没有始终保持正确的边距。

所以无论浏览器宽度是多少，我都要保持300px侧边栏宽度为20px左边距，并保持蓝色div响应从0到700px。

P.S。我检查了一些以前的主题，包括ie。这个小提琴

[http://jsfiddle.net/FXk4x/10/][2]

但是加左：20px;或margin-left：20px不起作用。

提前致谢。

Answer 1

你目前在底部有这个css：

@media screen and (max-width: 850px) {

    #sidebar {
        float:left;
        margin-left:0px;
        width:300px;
    }
}

这告诉浏览器如果窗口是850px或更低，那么应用这些规则（margin-left:0px;）。所以你的css正在工作，但是你在错误的屏幕宽度上查看margin-left:20px;会发生。检查以下两个例子：

您的确切代码，但全屏（如果您的屏幕宽度高于850px，您将看到20px的边距）： https://jsfiddle.net/yqh31d7v/embedded/result/

使用最大宽度为50px的媒体查询： https://jsfiddle.net/yqh31d7v/1/

Answer 2

好的，我已经弄清楚了。

如果你想混合固定和响应的浮动div，你需要将固定的位置改为绝对值。

我已经更新了之前的小提琴，它或多或少是这样的：

[https://jsfiddle.net/yqh31d7v/][1]