媒体查询快照后更改 div 布局答案

【问题标题】：Change div layout after media query snap媒体查询快照后更改 div 布局
【发布时间】：2014-08-08 21:48:13
【问题描述】：

我为我正在创建的网站页面创建了一篇文章帖子和布局的演示。我对桌面视图和平板电脑视图的布局感到满意，但对于移动设备，我需要稍微稍后进行布局。

这是一个演示，可以查看三个断点处的变化：

Demo Fiddle

专注于移动端视图，我需要以下内容：

帖子标题和帖子正文位于 div 顶部，帖子菜单仍在右侧。

帖子头像位于帖子正文内容下方，宽度相同。

我无法让它工作，有什么建议吗？

这是 html 布局：

    <aside class="timeline_main_nav">

        <nav>
            Timeline Menu
        </nav>

    </aside>

    <section class="timeline_body">

        <article class="timeline_posts">

            <div class="timeline_post_body">

                <div class="timeline_post_avatar">Avatar</div>
                <div class="timeline_post_menu">Post menu</div>
                <div class="timeline_post_title">Post Title</div>
                <div class="timeline_post_body">Post Body</div>
                <div class="timeline_post_footer">Post Footer</div>

            </div>

        </article>

    </section>

    <aside class="timeline_ads">

        <div>
            Timeline AdSpace
        </div>

    </aside>

这是移动视图的 css：

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

/******* Timeline body *******/

.timeline_wrapper{
    max-width: 95%;
    margin: 0 auto; 
}

.timeline_main_nav {
    display: none;
}

.timeline_body {
    width : 100%;
    float : left;
    box-sizing: border-box;
}

.timeline_ads {
    display: none;
}

.timeline_posts{
    background-color: #f1f1f1;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    width: 100%;
    float:left;
    position:relative;
    height: auto;
    border: solid thin #99A6C2;
}





/******* Timeline post body *******/


div.timeline_post_body div.timeline_post_avatar{
    float      :left;
    width      :110px;
    min-height :auto;
    background :#34495E;
    box-sizing: border-box;     
    padding: 10px;
}

div.timeline_post_body div.timeline_post_menu{
    float      :right;
    width      :110px;
    min-height :auto;
    background :#669;
    box-sizing: border-box; 
    padding: 10px;  
}

div.timeline_post_body div.timeline_post_title{
    margin     :0 110px 0 110px;
    min-height :auto;
    background :#6BB9F0;
    box-sizing: border-box; 
    padding: 10px;  
}

div.timeline_post_body div.timeline_post_body{
    margin     :0 110px 0 110px;
    min-height :auto;
    background :#1E8BC3;
    box-sizing: border-box; 
    padding: 10px;  
}

div.timeline_post_body div.timeline_post_footer{
    margin     :0 110px 0 110px;
    min-height :auto;
    background :#4B77BE;
    box-sizing: border-box; 
    padding: 10px;  
}



}

【问题讨论】：

标签： html css

【解决方案1】：

只是您尝试做的一个技巧，在所有divs 中使用float: none;，div 除外发布菜单。并且 avatar 应该放在 div post body 的底部，这样当您将 avatar 设置为 float: none; 时帖子正文下方的位置。请注意：将您的 css 从 div.timeline_post_body div.timeline_post_avatar 最小化到仅 .timeline_post_avatar。这使您的代码如此混乱。这对将来的使用非常重要。

【讨论】：