html - 如何像 facebook 那样用 css 对齐图片、名称和帖子？

Question

我正在尝试对齐全名、图片和帖子，就像他们在大多数社交网络(链接或 facebook)中所做的那样。但我不能很好地对齐它们。任何人都可以尝试用必要的东西来填补空白css 命令？提前谢谢你。

<div>
 <span class="picture"> <img src="/assets/images/rails.png"/></span> 
  <a  href="#" class="user-name">user-full-name</a>
 <span class="post"></span>
 </div>  

CSS

 .picture{height:40px;
         width:40px;
         } 

  .user-name{
         margin-bottom:35px;
            }
   .post{     }

Answer 1

.inline_table{
  display: inline-table;
  position: relative;
}

是您可能想要查看的另一个属性...任何同时具有相对位置和内联表的元素.. 将从左到右对齐并相互对接。

所以在这个例子中:

<div id="profile_picture" class="inline_table">
<div id="profile_name" class="inline_table">
<div id="profile_post" class="inline_table">

都将沿着同一行对齐