即使使用包装器 div，当我调整窗口大小时，div 也会移动？答案

【问题标题】：Divs are moving around when I resize the window even with a wrapper div?即使使用包装器 div，当我调整窗口大小时，div 也会移动？
【发布时间】：2017-03-10 19:36:15
【问题描述】：

我对 HTML 比较陌生，所以请多多包涵。我正在尝试制作一个基本的日历，我现在只有一个网格。由于某种原因，我的包装 div 似乎不起作用，当我调整窗口大小时，div 仍然四处移动。有谁知道原因吗？

这是我的代码的 JSFiddle：https://jsfiddle.net/ydbgz7y5/

#wrapper{
    margin: 5px auto;
    width:100%;
    max-width: 1100px;
    overflow: hidden;
}

.column{
    float: left;
    width: 150px;
    height: 750px;
    border: 1px solid blue;
    overflow: hidden;
}

.row{
    width: 150px;
    height: 148px;
    border: 1px solid red;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="wrapper">
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>  
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    </div>
</body>
</html>

【问题讨论】：

您必须使用最小宽度而不是最大宽度。反应灵敏且崩溃是一件好事。只需找到正确的断点即可。
谢谢，成功了！

标签： html css resize window wrapper

【解决方案1】：

给包装器一个min-width: 1100px; 以防止它移动

【讨论】：

【解决方案2】：

使用min-width 和max-width 使其根据您的选择工作这是您的代码中的一些修改

无需使用 width: 100% 和 max-width 属性，因为它总是覆盖它

#wrapper{
    margin: 5px auto;
    max-width: 800px;
    min-width: 800px;
    overflow: hidden;
}

.column{
    float: left;
    width: 150px;
    height: 750px;
    border: 1px solid blue;
    overflow: hidden;
}

.row{
    width: 150px;
    height: 148px;
    border: 1px solid red;
}

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div id="wrapper">
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>  
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    <div class="column"> 
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
        <div class="row"></div>
    </div>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

我看到的问题是包装器 ID 中的逻辑。现在，您声明包装器“具有整个屏幕的宽度”，宽度为 100%，并且包装器“最大宽度为 1100 像素”，如果宽度变得大于 1100 像素。

#wrapper {
    margin: 5px auto;
    width: 1064px;
    overflow: hidden;
}

在这里，我的意思是让宽度永久保持在 1064 像素，这是行和列中的固定框的组合，150 像素宽，加上它们的单个像素的边框。

如果您希望将来有日历缩放，我建议您在行和列类中使用结合最小/最大宽度的弹性框来根据屏幕大小自动缩放行和列。上述解决方案无法扩展。

【讨论】：