0
基本上，當瀏覽器最大化時，一切都按照我的意圖落實到位。但是，調整窗口大小會使我的div重疊。我已經在這裏嘗試了很多類似的問題的帖子，但沒有其他帖子有幫助，所以我張貼我自己的代碼。如何防止div窗口大小更改時重疊？
CODE：
$(document).ready(function(){
\t for(var i = 1; i <= (32*16); i++){ \t
\t \t $('.container').append("<div class=\"squares\" ></div>");
\t }
\t \t var $sqrs = $('.squares');
\t \t $sqrs.height("32px");
\t \t $sqrs.width("32px");
\t \t $sqrs.css("background", "#969696");
\t \t $sqrs.css("float", "right");
\t \t $sqrs.css("border-style", "solid");
\t \t $sqrs.css("border-width", "0");
\t \t
\t \t $sqrs.on("mouseenter", function(){
\t \t \t $(this).addClass("sqr1");
\t \t \t $('.sqr1').css("background", "grey");
\t \t });
\t $('.item').click(function(){
\t \t var numSqrs = parseFloat(prompt("How many squares do you want? (1-"));
\t })
\t \t
})body{
width: 100%;
margin: auto;
}
.wrap{
\t margin-left:auto;
margin-right:auto;
width:100%;
\t display: inline-block;
}
.top {
position: relative;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 55px;
border-bottom: 1px solid #A3A3A3;
-webkit-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15);
-moz-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15);
box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15);
display: inline-flex;
}
.bottom{ \t
\t margin-left:auto;
\t margin-right:auto;
\t width:100%;
\t position:relative;
\t display: inline-flex;
\t height: auto;
}
.container{
\t height: 512px;
\t width:1024px;
\t position: fixed;
\t left:20%;
\t border: 1px solid #A3A3A3;
\t top: 10%;
\t -webkit-box-shadow: 28px 36px 73px -13px rgba(0,0,0,1);
\t -moz-box-shadow: 28px 36px 73px -13px rgba(0,0,0,1);
\t box-shadow:28px 36px 73px -13px rgba(0,0,0,1);
\t
}
#proj{
\t margin-left: 150px;
}
.head{
\t width: 30px;
\t height: 30px;
\t margin: 5px;
}
.parent{
\t position: absolute;
\t left: 30%;
\t right: 50%;
\t top: 20%;
}
.etc{
\t margin: 0;
\t padding:0;
}
#box{
\t width: 40px;
\t height: 40px;
\t background: black;
\t margin: 8px;
\t border-radius: 40px;
}
.Odin{
\t padding-bottom: 10px;
\t margin-right: 20px;
\t
\t font-size: 20px;
\t font-weight: 200;
\t font-variant: small-caps;
\t letter-spacing: 1px;
\t color: black;
}
.menu{
\t height: 100%;
\t width: 200px;
\t position: fixed;
\t top: 8.2%;
\t left: 0;
\t float: left;
\t margin:0;
\t border: 1px solid #A3A3A3;
\t border-top: none;
-webkit-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15);
-moz-box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15);
\t box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15);
\t display: inline-flex;
}
\t
.menu{
\t display: inline-block;
\t margin: 0;
\t padding: 20px;
}
.item{
\t height: 50px;
\t width: 100%;
\t margin: 0;
\t padding: 0;
\t display: inline-flex;
}
.item:hover{
\t height: 50px;
\t width: 100%;
\t background-color: #A7A3A3;
\t margin: 0;
\t padding: 0;
\t display: inline-flex;
\t cursor: pointer;
}
.item1{
\t float: right;
\t margin-left: 20px;
\t padding-top: 13px;
\t font-size: 20px;
\t font-weight: 200;
\t font-variant: small-caps;
\t letter-spacing: 1px;
\t color: black;
}
#trash{
\t padding: 15px;
\t margin: 1px;
}<!DOCTYPE html>
<html>
\t <head>
\t \t <title>Javascript/jQuery Project</title>
\t \t <link rel="stylesheet" type="text/css" href="styles/main.css"/>
\t \t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
\t \t <script type="text/javascript" src="scripts/jquery-1.0.min.js"></script>
\t \t
\t </head>
\t <body> \t
\t \t \t <div class="wrap">
\t \t \t \t <div class="top">
\t \t \t \t \t <div id="box">
\t \t \t \t \t \t <img class="head" src="images/odin_head.png"/>
\t \t \t \t \t </div>
\t \t \t \t \t <p class="Odin">The Odin Project</p>
\t \t \t \t \t <p id="proj" class="Odin">Harsimran Mann's Etch-A-Sketch Project</p> \t \t
\t \t \t \t </div>
\t \t \t \t <div class="bottom">
\t \t \t \t \t <div class="scd">
\t \t \t \t \t \t <div class="menu">
\t \t \t \t \t \t \t <div class="item">
\t \t \t \t \t \t \t \t <img id="trash" src="images/grid-four-up-2x.png"/>
\t \t \t \t \t \t \t \t <span class="item1"> New Grid </span>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t \t <div class="item">
\t \t \t \t \t \t \t \t <img id="trash" src="images/trash-2x.png"/>
\t \t \t \t \t \t \t \t <span class="item1"> Clear </span>
\t \t \t \t \t \t \t </div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="container"></div>
\t \t \t \t \t </div>
\t \t \t \t </div>
\t \t \t </div>
\t \t \t
\t </body>
</html>
媒體查詢... –
看看這裏：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp – Andrew
感謝您的答案！ 但我通過將所有職位改爲親戚來修復它。 我發現的媒體查詢是如果我想讓它在其他設備上工作。我也會放棄它 – Sim