html - CSS 重叠 div

Question

我有 4 个 div：

#centered {
    position: absolute;
    top: 50%;
    left: 52%;
    width: 500px;
    height: 500px;
    margin-top: -250px; /* Half the height */
    margin-left: -250px; /* Half the width */
    }
#container{
    width:100%;
}

（左右都在这个容器里）

 #left{
        float:left;
        width: 260px;
        height: 600px;
    }
    #right{
        float: right;
        top: 50%;
        width: 160px;
        height: 600px;
    }

居中的 div 始终位于页面的中心，而另外两个位于页面的两侧。使用

body { min-width:1150px; }

#centered 和 #right 之间总是有一个空格。但是当我缩小页面时，#centered 和#left 之间没有保留空间，导致重叠。我怎样才能做到这一点？

Answer 1

您可以添加一个装订线<div>并相应地调整您的位置，或者您可以减少#left. 使用百分比而不是 px 作为宽度，#left调整#right大小时会使其更平滑。