Question

基本上，当浏览器最大化时，一切都按照我的意图落到了位置。但是，调整窗口大小会使我的div重叠。我在这里尝试过很多帖子，类似的问题，但其他帖子没有帮助，所以我发布了自己的代码。

CODE：

$(document).ready(function(){

	for(var i = 1; i <= (32*16); i++){	
		$('.container').append("<div class=\"squares\" ></div>");

	}
		var $sqrs = $('.squares');
		$sqrs.height("32px");
		$sqrs.width("32px");
		$sqrs.css("background", "#969696");
		$sqrs.css("float", "right");
		$sqrs.css("border-style", "solid");
		$sqrs.css("border-width", "0");
		
		$sqrs.on("mouseenter", function(){
			$(this).addClass("sqr1");
			$('.sqr1').css("background", "grey");
		});

	$('.item').click(function(){
		var numSqrs = parseFloat(prompt("How many squares do you want? (1-"));
	})

		

})

body{
width: 100%;
margin: auto;
}

.wrap{
	margin-left:auto;
    margin-right:auto;
    width:100%;
	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{	
	margin-left:auto;
	margin-right:auto;
	width:100%;
	position:relative;
	display: inline-flex;
	height: auto;
}
.container{
	height: 512px;
	width:1024px;
	position: fixed;
	left:20%;
	border: 1px solid #A3A3A3;
	top: 10%;
	-webkit-box-shadow: 28px 36px 73px -13px rgba(0,0,0,1);
	-moz-box-shadow: 28px 36px 73px -13px rgba(0,0,0,1);
	box-shadow:28px 36px 73px -13px rgba(0,0,0,1);
	
}


#proj{
	margin-left: 150px;
}

 .head{
	width: 30px;
	height: 30px;
	margin: 5px;
}

.parent{
	position: absolute;
	left: 30%;
	right: 50%;
	top: 20%;
}


.etc{
	margin: 0;
	padding:0;
}

 #box{
 	width: 40px;
 	height: 40px;
 	background: black;
 	margin: 8px;
 	border-radius: 40px;
 }

 .Odin{
 	padding-bottom: 10px;
 	margin-right: 20px;
 	
 	font-size: 20px;
	font-weight: 200;
	font-variant: small-caps;
	letter-spacing: 1px;
	color: black;
 }

.menu{
	height: 100%;
	width: 200px;
	position: fixed;
	top: 8.2%;
	left: 0;
	float: left;
	margin:0;
	border: 1px solid #A3A3A3;
	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);
  	box-shadow: -1px 2px 12px 0px rgba(0,0,0,0.15);
  	display: inline-flex;
 }
	



.menu{
	display: inline-block;
	margin: 0;
	padding: 20px;
}

.item{
	height: 50px;
	width: 100%;
	margin: 0;
	padding: 0;
	display: inline-flex;
}

.item:hover{
	height: 50px;
	width: 100%;
	background-color: #A7A3A3;
	margin: 0;
	padding: 0;
	display: inline-flex;
	cursor: pointer;
}
.item1{
	float: right;
	margin-left: 20px;
	padding-top: 13px;
 	font-size: 20px;
	font-weight: 200;
	font-variant: small-caps;
	letter-spacing: 1px;
	color: black;
}

#trash{
	padding: 15px;
	margin: 1px;
}

<!DOCTYPE html>
<html>
	<head>
		<title>Javascript/jQuery Project</title>
		<link rel="stylesheet" type="text/css" href="styles/main.css"/>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script type="text/javascript" src="scripts/jquery-1.0.min.js"></script>

		
	</head>
	<body>	
			<div class="wrap">
				<div class="top">
					<div id="box">
						<img class="head" src="images/odin_head.png"/>
					</div>
					<p class="Odin">The Odin Project</p>
					<p id="proj" class="Odin">Harsimran Mann's Etch-A-Sketch Project</p>		
				</div>
				<div class="bottom">
					<div class="scd">
						<div class="menu"> 
							<div class="item">
								<img id="trash" src="images/grid-four-up-2x.png"/>
								<span class="item1"> New Grid </span>
							</div>
							<div class="item">
								<img id="trash" src="images/trash-2x.png"/>
								<span class="item1"> Clear </span>
							</div>
						</div>
						<div class="container"></div>
					</div>
				</div>
			</div>
			

	</body>
</html>

Answer 1

您是否尝试过媒体查询（如下所示），

@media all and (max-width: 359px) and (min-width: 300px){ 
}
@media all and...

Answer 2

使用媒体查询使其具有响应性。如果你发现很难尝试以％而不是px给出宽度和高度。％根据窗口大小计算高度和宽度。

窗口大小改变时如何防止div重叠？

2 个答案: