Question

我正在使用文章标签构建网站的帖子项目，这包括一些元素，如头像，锅标题，帖子正文和帖子页脚，还会有一些控件，如菜单图标，显示菜单但我现在不要担心这件事。

我很好奇定位布局的最佳方法，因为此刻看起来有点乱，并且希望它更加稳固和恒定。

这是我到目前为止所做的演示。

因为你可以看到它有点混乱，我只需要一些专业知识来解决这个问题。有一个问题，它需要响应，但如果我可以在桌面视图上有建议，我可以处理其余的，但最好能得到你的意见。

<article class="timeline_posts">

    <div class="timeline_post_avatar">
        avatar
    </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 class="timeline_post_menu">
        menu control
    </div>                                      

</article>


.timeline_posts{
    background-color: #f1f1f1;
    box-sizing: border-box;
    margin: 0 0 20px 0;
    width: 100%;
    float:left;
    padding: 10px;
}






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


.timeline_post_avatar{
    background-color: red;
    box-sizing: border-box;
    float:left;
    width: 20%;
    padding: 40px;
}

.timeline_post_title{
    background-color: blue;
    box-sizing: border-box;
    float:left;
    padding: 10px;
    width: 70%;
}

.timeline_post_body{
    background-color: green;
    box-sizing: border-box;
    float:left;
    padding: 10px;
    width: 70%;
}

.timeline_post_footer{
    background-color: yellow;
    box-sizing: border-box;
    float:left;
    padding: 10px;
    width: 70%;
}

.timeline_post_menu{
    background-color: red;
    box-sizing: border-box;
    float:left;
    width: 10%;
}

Answer 1

除非必须，否则不要使用width:100%。我通常使用width:980px; margin:0 auto; 并将height或min-height提供给您的标记。如果你想使用width:100%你的风格必须是这样的：代码：

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style type="text/css">
   .container{
     width: 980px;
     min-height: 500px;
     outline: 1px solid red;
     margin: 0 auto;
    }
    .timeline_posts{
     width: 980px;
     min-height: 130px;
     outline: 2px dashed blue;
    }
   .timeline_post_avatar{
     width: 150px;
     height: 130px;
     float: left;
    background: red;
   }
   .timeline_post_title,.timeline_post_body,.timeline_post_footer{
     width: 745px;
     float: left;
     min-height: 44px;
    }
    .timeline_post_title{
     background: green;
    }
    .timeline_post_body{
     background:blue; 
    }
    .timeline_post_footer{
     background: yellow;
    }
    .timeline_post_menu{
     width: 85px;
     height: 30px;
     float: right;
     background: red;
     text-align: center;
     line-height: 25px;
     }
    </style>
   </head>
   <body>
    <div class="container">  
     <article class="timeline_posts">
      <div class="timeline_post_menu">
        menu control
      </div>
      <div class="timeline_post_avatar">
        avatar
      </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>
  </body>
 </html>

我为你上传了一个示例，以了解如何安排你的div旁边看看 s link ：很容易了解如何以正确的方式进行布局

使用文章标签构建帖子

1 个答案: