Question

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

左边的三个部分（桌面/平板电脑/手机）是我想要的。右边的页面是它现在出现的方式。基本上我需要5在4以下向上移动，3在4/5旁边移动以进行平板电脑查看，然后在3以下向下移动以进行电话查看。

我希望这有道理吗？我正在使用Dreamweaver，如果它有帮助/重要。谢谢！

Answer 1

可以如果已知某些高度。

小提琴：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
    }
}

CSS Div Block重新安排多个屏幕

1 个答案: