當我使用包裝div調整窗口大小時，div正在移動嗎？
[英]Divs are moving around when I resize the window even with a wrapper div?
問題描述
我在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>
3 個解決方案
解決方案1
1 2017-03-10 19:51:34
給包裝器min-width: 1100px; 阻止它移動
解決方案2
0 2017-03-10 20:04:00
使用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
0 2017-03-10 20:10:25
我看到的問題是包裝ID中的邏輯。 現在，您要指定包裝器“具有整個屏幕的寬度”，寬度為100％，包裝器“最大寬度為1100像素”，如果包裝器強制將包裝器移動到下方，寬度變得大於1100像素。
#wrapper {
margin: 5px auto;
width: 1064px;
overflow: hidden;
}
在這里，我要說的是將寬度永久保持在1064像素，這是行和列中的固定框（150像素寬）與單個像素邊界的組合。
如果您希望將來具有日歷比例，我建議在行和列類中結合使用彈性盒和最小/最大寬度來自動根據屏幕尺寸縮放行和列。 上述解決方案無法擴展。
當我調整瀏覽器大小時，如何阻止我的 web 頁面 div 元素四處移動
[英]How to stop my web page div elements moving around when i resize the browser
調整窗口大小時CSS浮動div重疊或不向下移動
[英]CSS floated div overlapping or not moving downward when resize the window
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.