2

私はメディアクエリでこのCSSコードを持っています:

#footer-top {
    width:100%;
    height:480px;
    padding-top:10px;
    border-bottom:2px #000000 solid;
}
#footer-left {
    width: 290px;
    float: left;
    padding: 5px 15px;
    border-right:1px #000000 solid;
}
#footer-middle {
    width: 294px; /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
    border-right:1px #000000 solid;
}
#footer-right {
    width: 270px;
    padding: 5px 15px;
    float: left;
}
#footer-bottom {
    clear: both;
    padding: 0 15px;
}

/* for 980px or less */
@media screen and (max-width: 980px) {
    #footer-left {
        width: 41%;
        padding: 1% 4%;
    }
    #footer-middle {
        width: 41%;
        padding: 1% 4%;
        margin: 0px 0px 5px 5px;
        float: right;
    }
    #footer-right {
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }
    #footer-bottom {
        padding: 1% 4%;
    }
}

/* for 700px or less */
@media screen and (max-width: 600px) {
    #footer-left {
        width: auto;
        float: none;
    }
    #footer-middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }
    #footer-right {
        width: auto;
        float: none;
    }
}

/* for 480px or less */
@media screen and (max-width: 480px) {
    #footer-right {
        display: none;
    }
}

そのため、小さな画面などにフッターをレスポンシブにしようとしています。

ここでフィドルを作成しました: http://jsfiddle.net/VMn7Y/ので、完全な HTML も表示できますが、画面サイズを縮小すると、フッターの右の div がフッターの下部の div の上に表示され始めます。画面が小さくなると、フッター下部の div が押し下げられるようにするにはどうすればよいですか?

4

2 に答える 2

1

回答を完了するための私のコメントへの追加は、例から削除することheight:480pxです#footer-top--- > http://jsfiddle.net/VMn7Y/17/

それがあなたが望んでいた方法であることを願っています！

于 2013-05-15T21:46:06.430 に答える
0

まず第一に、メディア クエリを使用するときは、小さい画面サイズから始めて徐々に大きくしていくと、より良い結果が得られやすくなります。

私はフィドルを修正しました。基本的に、幅を 30% (この場合はパディングを考慮して 27%) に変更するだけで済みました。

ここで確認してください：

float:left;
padding: 5px 10px;
width:27%;

修正されたjsfiddle

于 2013-05-15T21:48:39.780 に答える