0

そこで私がやろうとしているのは、2 つのサイドバーとメインの記事エリアを持つページをデザインすることです。ただし、タブレットや電話で使用するために縮小するので、2 つのサイドバーを移動して、最初はメイン エリアの横に垂直に積み上げ、最終的に両方ともその下に移動するようにします。私が抱えている問題は、そうすると正しく再注文できないことです。

左側の 3 つのセクション (デスクトップ/タブレット/電話) は、私が望む方法です。右のページは現在の様子です。基本的に、4 の下に移動するには 5 が必要です。タブレット ビューでは 4/5 の横に 3 が移動し、電話ビューでは 3 の下に移動するには 4 が必要です。

それが理にかなっていることを願っていますか？役立つ/重要な場合は、Dreamweaver を使用しています。ありがとう！

私が何を意味するかを見るためにクリックしてください！

4

1 に答える 1

0

ある程度の高さが分かっていれば可能です。

フィドル: http://jsfiddle.net/BramVanroy/Pt7sS/

#contentWrapこの作業を行うには、高さを#sideRight知る必要があります。これらが不明な場合は、jQuery を使用して高さを取得できます。

html, body, #header1, #header2, #contentWrap {
    width: 100%
}

#header1 {
    background: red;
    height: 50px
}

#header2 {
    background: green;
    height: 40px
}

#sideLeft, #main, #sideRight {
    box-sizing: border-box;
    float: left;
    height: 200px
}

#sideLeft, #sideRight {
    width: 20%;
    background: #333
}

#main {
    background: grey;
    width: 60%
}

@media screen and (max-width: 768px) {
    #main {
        float: right;
        width: 65%
    }

    #sideRight {
        clear: left
    }

    #sideRight, #sideLeft {
        width: 35%;
        height: 100px
    }
}

@media screen and (max-width: 480px) {

    #sideLeft, #main, #sideRight {
        float: none;
        width: 100%;
        position: absolute
    }

    #contentWrap {
        position: relative;
        height: 400px
    }

    #main {
        top: 0
    }

    #sideLeft {
        bottom: 100px
    }

    #sideRight {
        bottom: 0
    }
}
​
于 2012-08-06T07:38:10.173 に答える