1

在我看来，我有这部分 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 。我怎样才能获得显示在头像旁边的日期和用户名？

谢谢

4

3 回答 3

2

这是一种方式：

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

但是，如果您希望它们以某种方式排列，您可能需要进行一些调整（一种方式是给出ul.links一个固定的height，以及一些padding-top.

对于不理解的浏览器，您也可以使用float: left代替。display:inline-block

但是，对于floats，您必须考虑跟随它们的inline-block元素会发生什么 - 对于您没有的元素。

于 2012-12-06T12:54:06.740 回答
1

尝试将头像 div 浮动到左侧。

于 2012-12-06T12:57:08.260 回答
0

您是否尝试过将其设为两个 div，然后float: left在第一个 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>
于 2012-12-06T12:54:49.957 回答