^
(?:
[^_]*
_ # 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像素时,我无法这样做。谁能告诉我我无法理解错误的可能原因。请提供帮助,以防止我被卡住。 另外,我知道已经问过许多这样的问题,但是我仍然无法在代码中找出错误。