如何解决div重叠问题并保持css流体布局？

Question

我有两个div左右，当我恢复（最小化窗口）时，右div位于左div的顶部（换句话说重叠）。

如何解决这个问题？

#left {
    left: 3%;   
    position: absolute;
    width: 340px;
    margin-top: 10px;
}

#right {
    position: absolute; 
    left: 24%;
    width: 20%;
    margin-top: 10px;  
}

提前谢谢。

Answer 1

尝试将width更改为21% #left，然后添加max-width: 340px。

#left {
    left: 3%;   
    position: absolute;
    width: 21%
    max-width: 340px;
    margin-top: 10px;
}

Answer 2

您可以尝试使用#left

的设置最小宽度

#left {
    left: 3%;   
    position: absolute;
    width: 340px;
    min-width: 21%;
    margin-top: 10px;
}

#right {
    position: absolute; 
    left: 24%;
    width: 20%;
    margin-top: 10px; 
}

Answer 3

试试这个：

#left {
    left: 3%;   
    position: relative;
    width: 340px;
    min-width: 21%;
    margin-top: 10px;
}

#right {
    position: relative; 
    left: 24%;
    width: 20%;
    margin-top: 10px; 
}