0

所以我想做的是设计一个有两个侧边栏和一个主要文章区域的页面。不过，由于它缩小以供平板电脑或手机使用，我希望两个侧边栏移动，以便它们首先垂直堆叠在主要区域旁边，然后最终都移动到它下方。我遇到的问题是我无法让他们在这样做时正确重新订购。

左边的三个部分（台式机/平板电脑/手机）是我想要的。右边的页面是它现在的样子。基本上我需要 5 移动到 4 以下，3 移动到 4/5 旁边以查看平板电脑视图，然后 4 移动到 3 以下移动以查看手机视图。

我希望这是有道理的？如果有帮助/很重要，我正在使用 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 回答