当我使用包装div调整窗口大小时，div正在移动吗？
[英]Divs are moving around when I resize the window even with a wrapper div?
问题描述
I'm relatively new at HTML so please bear with me. 
我在HTML方面相对较新，因此请耐心等待。 I'm trying to make a basic calender, all I have now is a grid. 我正在尝试制作基本的压光机，现在只剩下一个网格。 For some reason my wrapper div doesn't seem to work, when I resize the window, the divs still move around. 由于某种原因，我的包装器div似乎无法正常工作，当我调整窗口大小时，div仍然在移动。 Does anyone know the reason why? 有人知道原因吗？
Here is a JSFiddle of my code: https://jsfiddle.net/ydbgz7y5/ 这是我的代码的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>
3 个解决方案
解决方案1
1 2017-03-10 19:51:34
Give the wrapper a min-width: 1100px; 给包装器min-width: 1100px; to keep it from moving 阻止它移动
解决方案2
0 2017-03-10 20:04:00
Use min-width along with max-width to make it work according to your choice here is some modification in your code 使用min-width和max-width使其根据您的选择工作，这是代码中的一些修改
No need to use width: 100% along with max-width property as it always override it 无需使用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
0 2017-03-10 20:10:25
The issue that I'm seeing is the logic in the wrapper ID. 我看到的问题是包装ID中的逻辑。 Right now, you're stating for the wrapper to "have the width of the whole screen" with width at 100%, and for the wrapper to "have a maximum width of 1100 pixels", forcing the wrapper to move elements below if the width becomes greater than 1100 pixels. 现在，您要指定包装器“具有整个屏幕的宽度”，宽度为100％，包装器“最大宽度为1100像素”，如果包装器强制将包装器移动到下方，宽度变得大于1100像素。
#wrapper {
margin: 5px auto;
width: 1064px;
overflow: hidden;
}
Here, what I'm saying is to keep the width permanently at 1064 pixels, which is the combination of both your fixed boxes in the rows and columns, 150 pixels wide, combined with their borders of a single pixel. 在这里，我要说的是将宽度永久保持在1064像素，这是行和列中的固定框（150像素宽）与单个像素边界的组合。
If you want to have the calendar scale in the future, I would recommend using a flexbox combined with min/max widths in the row and column classes to automatically scale the rows and columns based off of screen size. 如果您希望将来具有日历比例，我建议在行和列类中结合使用弹性盒和最小/最大宽度来自动根据屏幕尺寸缩放行和列。 The above solution does not scale. 上述解决方案无法扩展。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.