Div类订单问题

Question

我正在使用社交媒体网络，在我的帖子中，我正试图在Bootstrap 3中找到的图标添加到帖子中。现在，我已经设置了与用户名同一行上的图标，但我无法弄清楚如何获取用户名，然后是图形。下面是我的代码：

<div class="media well single-post" id="post-<?php echo $post['post_id'];?>"> 

<div class="avatar large pull-left"> 
    <?php if ($this->profile_type === 'page' || $post['post_wall_profile_type'] === 'page'):?> 
    <a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>"> 
     <img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>"> 
    </a> 
    <?php elseif ($this->profile_type === 'feed' && $post['post_wall_profile_type'] === 'group'):?> 
    <a href="<?php echo $this->baseUrl()?>/<?php echo $post['post_wall_name'];?>"> 
     <img src="<?php echo $this->GetStorageUrl('avatar') . $post['post_wall_avatar'];?>"> 
    </a> 
    <?php else:?> 
    <div class="pull-right"><?php if (isset($post['author_meta']['badges'])):?> 
     <div class="network-badges vertical"> 
      <?php echo $this->partial('/partial/badges.phtml', array('badges' => $post['author_meta']['badges']));?> 
     </div> 
     <?php endif;?><div class="pull-left"><a href="<?php echo $this->baseUrl()?>/<?php echo $post['user_name'];?>"></div></div> 
     <div class="pull-left"><img src="<?php echo $this->GetStorageUrl('avatar') . $post['user_avatar'];?>"> 
    </a></div> 
    <?php endif;?> 
</div> 

下面是它目前的样子：http://www.startrekrisa.com/Picture1.png

我知道这会是一个简单的修复，但我不知道如何做到这一点。

在此先感谢

Answer 1

[编辑]参见本jsfiddle基于下面的固定标记，你的评论给了/partial/badges.phtml代码;显然你的全球CSS是不存在的，但你可以正确地看到它把化身留在它的右边和glyphicons右边[/编辑]

你用这段代码生成的HTML看起来不太正确，考虑到你的问题只涉及html/css，如果没有php逻辑，你最好把你的代码示例放到一个html + css文件中。

从我所看到的，你的问题directlly关心你的主要逻辑，当内如果是真实的其他一部分。在这种情况下，我相信你的代码会产生

<div class="media well single-post" id="post-1234"> 
    <div class="avatar large pull-left"> 
     <div class="pull-right"> 
      <div class="network-badges vertical"> 
       <!-- content of /partial/badges.phtml with the user bages --> 
      </div> 
      <div class="pull-left"><a href="http://example.org/users/username"></div> 
     </div> 
     <div class="pull-left"><img src="http://example.org/avatars/username"> 
     </a> 
    </div> 
</div> 

你可以在这里看到你的HTML问题：

1. 您拉左 DIV关闭之前的内部链接是封闭的;里面的链接上
2. 你必须打开和关闭标签之间的不匹配进一步关闭您DIV

我相信你想要的HTML会更喜欢

<div class="media well single-post" id="post-1234"> 
    <div class="avatar large pull-left"> 
     <div class="pull-right"> 
      <div class="network-badges vertical"> 
       <!-- content of /partial/badges.phtml with the user bages --> 
      </div> 
     </div> 
     <div class="pull-left"> 
      <a href="http://example.org/users/username"> 
       <img src="http://example.org/avatars/username"> 
      </a> 
     </div> 
    </div> 
</div> 

混合PHP的逻辑与你的HTML一样不是很了不起，会导致你更类似的问题，你最终不会产生你想象中的标记。

P.S.在接口上工作时，通常不需要任何逻辑，只需要静态数据，以确保获得所需的标记，然后仅将它与您的逻辑相结合，这通常是一种很好的做法（但最好还是让逻辑更好从UI中分离出来）