调整窗口大小时无法阻止 div 下拉答案

【问题标题】：Trouble stopping a div from dropping down while resizing window调整窗口大小时无法阻止 div 下拉
【发布时间】：2016-02-16 04:53:09
【问题描述】：

我已经尝试自己修复了一段时间，这似乎是一个简单的问题，但我迷路了。

我有两个 div，一个向左浮动，一个向右浮动。右边的左边距为 40px，宽度需要随着窗口变小而调整。目前，一旦两个 div 接触，它就会下降。

请检查此以进一步了解:) https://jsfiddle.net/to7g54sn/1/

#contentwrapper {
width: 100%;
max-width: 1160px;
float: right;
margin-top: 154px;
margin-left: 40px;
}

#navigation {
width: 150px;
margin-left: -120px;
float: left;
}

（预览需要 1330px 的宽度才能在 div 下降之前看到它们）。

右边 div 的 margin-left: 40px 需要不断地应用，如果你在调整大小的窗口上向下滚动你会看到左边的 div 重叠。我认为 javascript 使这个问题变得棘手，但我不完全确定。

【问题讨论】：

我认为您正在寻找的是 2-col 布局，其中一列是固定宽度，另一列是流动的，对吧？如果是这样，请查看这个使用负边距的简单演示 codepen.io/tedw/pen/azqMRL?editors=1100 您也可以使用 display: table-cell; 或 display: flex; 来执行此操作。
使用相对 div 宽度 stackoverflow.com/questions/21136975/…
@TedWhitehead ...感谢您的帮助。我尝试将您在我的 jsfiddle 中编写的内容合并，但我无法实现我想要的。这可能是因为我的javascript可能？或者可能是因为我很难理解你的意思。你有没有机会快速看看我的jsfiddle？或者向我提供一些进一步解释您的解决方案的信息。 :)
@Keloo 感谢您的链接，但我的问题对他来说有点复杂，答案并没有太大帮助。 javascript 让这有点困难。

标签： javascript jquery html css responsive-design

【解决方案1】：

我有一个简单的解决方案。只需在下面使用这个 css：

#contentwrapper {
    width: calc(100% - 70px);
}

在jsfiddle上查看这个

【讨论】：

非常感谢。您能否解释一下这是如何工作的，以便我可以学习？
就像动态css。它会得到它的父母的全宽少 70 像素。