响应式设计错误答案

【问题标题】：Responsive design bug响应式设计错误
【发布时间】：2023-03-12 22:10:01
【问题描述】：

在尝试为新的响应式布局网页设计创建模板时，我真的对 DIV 元素定位错误感到绝望。

问题：当您将窗口大小调整为小于 800px 时，“sidebar_right”（在线用户）DIV 元素不会直接显示在“obsah”（内容）DIV 下方，而是在“sidebar_left”（菜单）下反弹DIV 元素。

请帮忙！我已经花了 2 个小时尝试任何东西，但没有任何成功:(

在小于 500 像素的情况下它可以正常工作，以及大于 800 像素。当前窗口宽度显示在左上角。

【问题讨论】：

【解决方案1】：

您有 2 个媒体查询导致它下推：如果您删除它

@media screen and (max-width: 800px)
#obsah {
    width: 80%;
}

并删除它

@media screen and (max-width: 800px)
#sidebar_right {
    width: 50%; 
}

如下所示：

【讨论】：

【解决方案2】：

好吧，在 500 到 800 像素之间 #sidebar_right 的比例为 50% - 这太多了，不适合其他元素（似乎这是内联定义的，在该页面顶部的 style 标记中）

【讨论】：

我试图实现这种行为cs.renault-club.cz/responsive_003.php这是基于css float的先前版本。它工作得很好，但我因为脆弱而放弃了它。当我在“obsah” DIV 元素（主页内容容器）中使用一些 css 浮动和清除：两者时，整个响应式设计就被破坏了。所以我将其切换为 display: inline-block DIV 元素。但现在我意识到，通过使用这种方法，不可能实现与使用 float 时相同的行为。它的行为就像一个行，行元素。无论如何，非常感谢您的帮助。

【解决方案3】：

这不是错误。这就是盒子模型的工作原理。试试：

#sidebar_left { float:left; }

【讨论】：

xturgorex：非常感谢您的建议。你是对的。我已经意识到它的行为就像一个行 - 行元素。 Float 很好，完全符合我的预期，但它太脆弱了。当我使用 float 然后 clear: both;在“obsah”DIV 元素（主要内容容器）内部，响应式设计被破坏了。这就是我尝试使用 display: inline-block 元素的原因。