我正在使用有关响应式网站设计的教程，但我不知道为什么这段代码无法正常工作。
这是一个 demo和代码。哪里有问题？如何在调整窗口大小时使右侧的 div 位于左侧下方？
HTML
<body>
<div id="containter">
<img src="http://cf.badassdigest.com/_uploads/images/28150/alternate_oscars_header__index.jp"/>
<div id="left-column"> This is the left column. Staphp dap trap dap tyryt Staphp dap trap dap</div>
<div id="right-column"> make blablabala and kitcat Staphp dap trap dap tyryt Staphp dap trap dap tyryt </div>
</div>
CSS
#container {
width: 600px;
margin-right: auto;
margin-left: auto;
}
#left-column {
width: 400px;
float: left;
background: red;
}
#right-column {
width: 200px;
float: right;
background: green;
}
@media screen and (max-width: 590px) {
#container {
width:100%
}
#left-column {
width: 70%;
float: left;
background: red;
}
#right-column {
width: 30%;
float: right;
background: green;
}
img {
width: 100%
}
}
@media screen and (max-width: 350px) {
#left-column {
width: 100%
background: red;
}
#right-column {
width: 100%
background: green;
}
}
因为我没有更多详细信息，所以没有任何内容的随机文本。
最佳答案
我猜你的意思是你的图片和 div 没有按计划调整大小，这是因为你的 CSS 有问题。在第 32、38 和 42 行是一个 ';'丢失的。我的建议是使用 CSS Validator如果你大多数时候都被教程代码困住了，那就是这样的小东西。这是你的 fixed JSFiddle顺便提一句。 祝你好运，玩得开心，山姆!
#container {
width: 600px;
margin-right: auto;
margin-left: auto;
}
#left-column {
width: 400px;
float: left;
background: red;
}
#right-column {
width: 200px;
float: right;
background: green;
}
@media screen and (max-width: 599px) {
#container {
width:100%
}
#left-column {
width: 70%;
float: left;
background: red;
}
#right-column {
width: 30%;
float: right;
background: green;
}
img {
width: 100%;
}
}
@media screen and (max-width: 350px) {
#left-column {
width: 100%;
background: red;
}
#right-column {
width: 100%;
background: green;
}
}
关于html - Div 不会像它们应该的那样折叠 - 媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18157100/