如何使用CSS來顯示一個頭像旁邊的細節？

Question

我在我查看HTML的這一部分：

<div class="info">  
    <img width="52" height="52" alt="Avatar" src="/ThemeFiles/Base/images/User/user-avatar.png"/> 
</div> 
<ul class="links"> 
    <li> 
     <%: newsItem.CommentDate %> 
    </li> 
    <li> 
     <%: ViewBag.UserName %> 
    </li> 
</ul> 

我與newsItem.CommentDate和ViewBag.UserName 下的頭像我的頭像顯示。我怎樣才能得到日期和用戶名顯示下一個到頭像？

感謝

Answer 1

這是一種方式：

div.info { display: inline-block; width:52px; height:52px; } 
ul.links { display: inline-block; } 

您可能需要做一些調整，不過，如果你想讓他們行了以某種方式（單程是給ul.links固定height，一些padding-top一起。

您還可以使用float: left代替display:inline-block對於不理解它的瀏覽器。

隨着float s，但是，然後你必須考慮元素他們 - inline-block元素你不。

Answer 2

您是否嘗試過使它兩個div，然後在第一個div

<div class="info">  
    <img width="52" height="52" alt="Avatar" src="/ThemeFiles/Base/images/User/user-avatar.png"/> 
    </div> 

    <div class="linkscontainer"> 
      <ul class="links"> 
      <li> 
       <%: newsItem.CommentDate %> 
      </li> 
      <li> 
       <%: ViewBag.UserName %> 
      </li> 
      </ul> 
     <div> 

Answer 3

嘗試浮動化身div來使用左側float: left。