如何防止div部分向下移动？

Question

我有一个搜索页面，当我改变浏览器窗口的大小时，我想阻止右边的“top20”div部分移动到矩形的圆形部分下方。

CSS：

#search_parameters_border {
    border: 1px outset gray;
    float: left;
    padding: 10px;    
}

#searchBox {
    background-color: white;
    color: black;
    text-align: left;
    margin-bottom: 15px;
}

#categories {
    line-height: 20px;
    height: 420px;
    width: 250px;
    float: left;
    padding: 10px;        
    margin: 5px 5px 5px 5px;
}

#additionalFilters {
    width: 700px;
    float: left;
    padding: 10px;       
    margin: 5px 5px 5px 5px;
}

#top20 {
    width: 650px;
    padding: 5px;        
    margin: 5px 5px 5px 50px;
    float: left;
}

屏幕截图：

Answer 1

由于您的浮动没有包含元素，因此手机允许您的最后一个浮动被推到您不希望它去的地方。使用“容器”或“包装”div通常是一个好主意，因为您会看到它们有时会引用您的站点的最大允许宽度来围绕您的构建（或者如果您想要获得一点点发烧友的最小宽度）。它将解决您的问题，并帮助您保持井井有条。同样，在这种情况下，如果遇到问题，有时可以更快地将“容器”div中的属性设置为“position：relative”。绝对通过“position：absolute; top：100px; left：50px;”来定位你遇到麻烦的div或类似的间距。如果您对上述任何内容或其他评论有任何疑问，请告诉我，我可以更详细地解释。

Answer 2

当您为所有宽度使用绝对值时，您需要为周围容器指定最小宽度。比你顶部的div不会移动。 但你应该考虑让你的风格更流畅。