0

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

链接到教程

这是一个演示和代码。问题出在哪里？调整窗口大小时如何使右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;
}
}

随机文本什么都没有，因为我没有更多细节。

4

3 回答 3

4

我猜你的意思是你的图像和你的 div 没有按计划调整大小，这是因为你的 CSS 有问题。在第 32、38 和 42 行是一个 ';' 失踪。我的建议是使用CSS 验证器，如果您在大多数情况下都被教程代码卡住，那么它几乎就是这样。顺便说一句，这里是您固定的 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;
    }
}
于 2013-08-09T23:49:40.437 回答
1

您在 HTML 中拼错了容器<div id="containter">

于 2013-08-09T23:38:10.647 回答
1

看起来像是 CSS 拼写错误的情况，您缺少一些属性分隔符“;”。这是更正的（工作）小提琴。

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

@media screen and (max-width: 350px) {
   #left-column {
   width: 100%; 
   background: red; 
}
于 2013-08-09T23:47:53.117 回答