响应网站：我错过了什么？

当我收缩视口时，我的div（标记为“Top”，“Left”和“Right”）堆叠在一起，就像我想要的一样，但不显示它们的全宽。每个div的宽度都会变小，因此您无法在移动设备上看到它们的全宽。我应该如何更改我的代码以显示移动设备上每个div的全宽？响应网站：我错过了什么？

body 
 
{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#wrapper 
 
{ 
 
    position: relative; 
 
    width: 900px; 
 
    height: 600px; 
 
    background-color: yellow; 
 
    left: 50%; 
 
    margin-left: -450px; 
 
    top: 0; 
 
} 
 

 
#main 
 
{ 
 
    position: absolute; 
 
    width: 900px; 
 
    height: 100px; 
 
    background-color: #99CCCC; 
 
    left: 50%; 
 
    margin-left: -450px; 
 
} 
 

 
#main p 
 
{ 
 
    font-family: sans-serif; 
 
    color: #333; 
 
    font-weight: bold; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    margin-top: 0; 
 
    padding-top: 25px; 
 
} 
 

 
#left 
 
{ 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 500px; 
 
    background-color: green; 
 
    top: 100px; 
 
} 
 

 
#left p 
 
{ 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    color: #333; 
 
    font-size: 45px; 
 
    text-align: center; 
 
} 
 

 
#right 
 
{ 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 500px; 
 
    top: 100px; 
 
    right: 0; 
 
    background-color: dodgerblue; 
 
} 
 

 
#right p 
 
{ 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    color: #333; 
 
    font-size: 45px; 
 
    text-align: center; 
 
} 
 

 
/* START OF MEDIA QUERIES */ 
 

 
@media all and (max-width: 961px) { 
 
    
 
#wrapper { 
 
    position: relative 
 
    width: 100%; 
 
    height: 400px; 
 
    background-color: yellow; 
 
    left: 0; 
 
    margin-left: 0; 
 
    top: 0; 
 
} 
 
    
 
#main { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #99CCCC; 
 
    left: 0; 
 
    margin-left: 0; 
 
} 
 

 
#left { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: green; 
 
    top: 150px; 
 
    display: block; 
 
} 
 

 
#left p { 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    color: #333; 
 
    font-size: 45px; 
 
    text-align: center; 
 
    margin-top: 25px; 
 
} 
 

 
#right { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: dodgerblue; 
 
    top: 300px; 
 
    right: 0; 
 
} 
 

 
#right p { 
 
    font-family: sans-serif; 
 
    font-weight: bold; 
 
    color: #333; 
 
    font-size: 45px; 
 
    text-align: center; 
 
    margin-top: 25px; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
    <head> 
 
     <title>Responsive website</title> 
 
     <link rel="stylesheet" href="test.css"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no"/> 
 
    </head> 
 
<body> 
 
<div id="wrapper"> 
 
    <div id="main"> 
 
     <p>Top</p> 
 
    </div> 
 
    <div id="left"> 
 
     <p>Left</p> 
 
    </div> 
 
    <div id="right"> 
 
     <p>Right</p> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

来源

2016-04-30 noddy

请检查updeted答案：

You have small mistake in your code, add the " ; " after you can give 
"position:relative;" in id "#wrapper" for responsive.

来源

2016-04-30 10:34:05 Jainam

@Leo狮子这个错误有我没有见过宽度：在浏览器100％。 – Jainam

响应网站：我错过了什么？

回答

相关问题