Question

我正在尝试将全名，图片和帖子对齐，就像他们在大多数社交网络（链接或脸谱）中一样。但我不能将它们对齐好。可以请任何人试着填补必要的空白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;
}

是您可能想要查看的另一个属性...任何具有位置相对AND内联表的元素将从左到右对齐彼此对齐。

所以在这个例子中：

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

将全部沿同一行对齐

Answer 2

span.picture {
    display: block;
    float: left;
    margin-right: 10px;
}

Answer 3

以下是一个基本示例：http://jsfiddle.net/GU2aM/让您入门。

如何使用像facebook这样的CSS对齐图片，名称和帖子呢？

3 个答案: