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