margin:0自动响应式网页设计

时间:2018-06-22 18:51:51

标签: responsive-design margin

 ^ 
 (?:
      [^_]* 
      _                # From = 2
 ){2}

 (                     # (1 start)
      [^_]*                    
      (?:
           _    
           [^_]*                    
      ){1}
 )                     # (1 end)
 _                     # To = 4
.container{
	display: flex;
	flex-wrap: wrap;
	max-width:1500px;
}
.box{
	width: 100%;
	height:200px;
}
.box1{
	background-color:red;
}
.box2{
	background-color:blue;
}
.box3{
	background-color:green;
}
@media screen and (min-width: 300px){
	.box1{
		width:100%;
	}
	.box2,.box3{
		width:50%;
	}
}
@media screen and (min-width: 700px){
	.box1{
		width:15%;
	}
	.box2{
		width:30%;
	}
	.box3{
		width:65%;
	}
}
@media screen and (min-width: 960px){
	.box1{
		width:15%;
	}
	.box2{
		width:30%;
	}
	.box3{
		width:55%;
	}
	.container{
		margin: 0 auto;
	}
}

<html>
	<head>
		<title>responsive web</title>
		<link rel="stylesheet" href="responsive_web.css">
		<meta name="viewport" content="width=device-width,initial-scale=1">
	</head>
	<body>
		<div class="container">
			<div class="box box1"></div>
			<div class="box box2"></div>
			<div class="box box3"></div>
		</div>
	</body>

<!-- begin snippet: js hide: false console: true babel: false -->

我正在尝试使用margin:0 auto将容器居中,但是当浏览器大于960像素时,我无法这样做。谁能告诉我我无法理解错误的可能原因。请提供帮助,以防止我被卡住。 另外,我知道已经问过许多这样的问题,但是我仍然无法在代码中找出错误。

0 个答案:

没有答案