css - 如何防止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

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