html - 响应式设计错误

Question

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

网址是：http ://cs.renault-club.cz/responsive_005_bug.php

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

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

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

Answer 1

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

#sidebar_left { float:left; }

Answer 2

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

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

并删除它

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

如下所示：

Answer 3

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