Question

我正在使用有关响应式网站设计的教程，但我不知道为什么此代码无法正常工作。

这是一个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;
}
}

随机文字，因为我没有更多细节。

Answer 1

我猜你的意思是你的图像和你的div没有像计划一样调整大小，这是因为你有错误的CSS。在第32,38和42行是';'失踪。我的提示是使用CSS Validator，如果你大部分时间都遇到教程代码，那么它就像这样。在这里你的fixed JSFiddle顺便说一下。祝你好运，好玩，Sam！

#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;
    }
}

Answer 2

您在HTML <div id="containter">

中拼错了容器

Answer 3

看起来像一个CSS拼写错误，你缺少一些属性分隔符';'。 Here is纠正（工作）小提琴。

具体来说，这个导致了max-width属性问题

@media screen and (max-width: 350px) {
   #left-column {
   width: 100%; 
   background: red; 
}

分区不会像他们应该的那样崩溃 - 媒体查询

3 个答案: