Question

我正在处理各种屏幕尺寸的自适应布局，并且具有以下HTML结构：

<div id="top">
    some text 1
</div>
<div id="middle">
    some text 2
</div>
<div id="bottom">
    some text 3
</div>

和CSS如下：

/*Responsive Layout Style Start */ 
/*STRUCTURE*/

#top {
    width: 220px;
    float: left;
    padding: 5px 8px 5px 8px;
    margin-left: 8px;
    background: #EFF5F8;
}

#middle {
    width: 452px; 
    float: left;
    padding: 5px 8px;
    margin: 0px 5px 5px 5px;
}

#bottom {
    width: 220px;
    padding: 5px 5px;
    float: left;
        background: #EFF5F8;
}

/*MEDIA QUERIES*/
/* for 980px or less */
@media screen and (max-width: 980px) {
    #top {
        width: 40%;

    }
    #middle {
        width: 55%;
        padding: 5px 5px;
        float: right;
    }

    #bottom {
        clear: both;
        padding: 1% 2%;
        width: auto;
        float: none;
    }
}

/* for 900px or less */
@media screen and (max-width: 900px) {
    #content {
        width: 39%;
    }
    #middle {
        width: 55%;
        padding: 5px 5px;
        float: right;
    }

    #bottom {
        clear: both;
        width: auto;
        float: none;
    }
}

/* for 800px or less */
@media screen and (max-width: 800px) {
    #top {
        width: 33%;
    }
    #middle {
        width: 59%;
        padding: 5px 5px;
        float: right;
    }

    #bottom {
        clear: both;
        width: auto;
        float: none;
    }

}

/* for 600px or less */
@media screen and (max-width: 600px) {
    #top {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        padding: 5px 10px;
        float: right;
        margin: 0px 5px 5px 5px;
    }

    #bottom {
        width: auto;
        float: none;
    }        
}

/* for 480px or less */
@media screen and (max-width: 480px) {

    h1 {
        font-size: 24px;
    }
}

/* border & guideline */
#top {
    background: #f8f8f8;
}
#bottom {
    background: #f0efef;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
/*Responsive Layout Style End */

为600px或更低。我想让“中间”部分显示在Top上，然后是“top”和“bottom”部分

我尝试了google的各种选项没有任何帮助。

任何想法都会有很大的帮助。

Answer 1

您可以在请求的屏幕尺寸上放置隐藏 div displayed。

示例 -

<强> HTML

<div id="middle_hidden">
    some text 2
</div>
<div id="top">
    some text 1
</div>
<div id="middle">
    some text 2
</div>
<div id="bottom">
    some text 3
</div>

<强> CSS

....

#middle_hidden {
    display:none;
}

....

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

    ....

    #middle {
        ....
        display:none;
    }

    #middle_hidden {
        display:block;
    }

}

JSFiddle

使用CSS定位div

1 个答案: