Question

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

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

关注移动视图，我需要以下内容：

帖子标题和帖子正文位于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;  
}



}

Answer 1

除了float: none; 帖子菜单之外，在所有divs中使用div只是你想要做的一招。头像应放在div 帖子正文的底部，这样当您将头像设置为{{1}时它将位于帖子正文下方。还有一个注意事项：最小化您的css，例如从float: none;到仅div.timeline_post_body div.timeline_post_avatar。这会让你的代码变得如此混乱。这对未来的使用非常重要。

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

1 个答案: