【发布时间】：2016-05-07 05:05:23
【问题描述】：
https://jsfiddle.net/ovvnnhgt/1
我设计了一个响应式网站，它在 jsfiddle 中看起来有点奇怪（至少在我的屏幕上它没有显示最大分辨率布局）但你可以看到这个想法。
将页面一直缩小，您会在 div“侧边栏”下看到 div“内容”。然后放大，你会看到内容的宽度缩小了。
我的问题是我希望内容 div 位于侧边栏 div 的右侧，同时它执行此操作（看起来侧边栏正在挤压内容）但无论我多么努力，我都无法让它工作用代码。
最大分辨率布局具有它，因此当您更改宽度时，内容 div 会更靠近侧边栏 div，然后我希望下一个分辨率布局遵循这个想法，但在最终变成移动设备之前让内容 div 稍微挤压一下友好的布局，但在改变宽度时它会下降。
@media screen and (max-width: 1070px) {
.contentwrap {
width: auto;
float: left;
}
}
一旦它达到这个宽度，我就会让整个内容浮动到一边，侧边栏就会打开，这样当我改变宽度时，它会将它推向侧边栏，但它几乎完美地做到了，它只是向下移动。
【问题讨论】：
-
您可以使用 flexbox css-tricks.com/snippets/css/a-guide-to-flexbox 轻松完成此操作。如果您有时间，我建议您观看此教程以更好地理解youtube.com/watch?v=G7EIAgfkhmg
-
谢谢，我去看看。我必须彻底改变我的代码吗？我花了很多时间在这个布局上，并希望找到问题最少的方法来更改我当前的代码来实现这一点。编辑：这似乎很有希望。以后我得好好研究一下。
-
这个问题的大多数答案都会将您引导至 Flexbox。这是 CSS 的未来（至少目前是这样）。尽早适应最符合您的利益，而且它非常易于使用。一旦你学会了它，它会让事情变得容易 10 倍。您不必改变太多，但是会有所改变，尽管这非常值得。
-
谢谢，我不知道它有那么大。我会好好学习的！
-
虽然我理解您目前不想放弃所有的辛勤工作，但使用 flexbox 或 bootstrap 等响应式框架最终会让项目顺利完成。对于当前的这个问题，您没有遇到“挤压”，因为您为容器设置了宽度（以像素为单位）。将
.contentwrap和.sidebarwrap设置为 %s 应该会有所帮助。此外，您的侧边栏浮动在包装之外。