0

レスポンシブ Web サイトのデザインに関するチュートリアルに取り組んでいますが、このコードが正しく機能しない理由がわかりません。

チュートリアルへのリンク

そして、これがデモとコードです。問題はどこだ？ウィンドウのサイズを変更するときに右の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 Validatorを使用することです。ここで、固定された 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

CSS のタイプミスのようです。いくつかのプロパティ セパレーター「;」がありません。これが修正された（動作する）フィドルです。

具体的には、これが max-width プロパティの問題を引き起こしていました

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

HTML のコンテナのスペルを間違えた<div id="containter">

于 2013-08-09T23:38:10.647 に答える