div 是否应该封装在包装器 div 中,以防止它们在视口调整大小时消失/重新定位



我在屏幕上定位div时遇到困难。我希望它们内联放置,我已经指定了display:inline-blockfloat:或其组合。但是,每当我调整窗口大小时,div 都会消失或重新定位在彼此下方。我阅读了一个建议将div 封装在包装器div 中的解决方案并尝试了该解决方案,但我偶然发现了同样的问题,因为我希望包装器div 占据屏幕的整个高度而没有 y 溢出,所以如果我指定一个height:100%每当窗口重新调整大小时,子元素都会重新调整大小;

------------------
header
------------------
div1   div2   div3

------------------

为了坚持你的设计,请将以下CSS代码添加到你的身体中:-

html, body {
    width: 100%;
    max-width: 100%;
    margin:  0px;
}
wrapper {
    position: relative;
    width: 100%;
    height: auto;
}
#divOne {
    box-sizing: border-box;
    display: block;
    width: 30%;
    float: left;
}
#divTwo {
    box-sizing: border-box;
    display: block;
    width: 40%;
    float: left;
}
#divThree {
    box-sizing: border-box;
    display: block;
    width: 30%;
    float: left;
}

给它们一个固定但相对的宽度将停止重新定位div的问题。 在包装器div 中添加div1、div2 和div3。

注意:边框框属性将处理您添加的额外边距、边框或填充。