潜水舱秩序问题

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

[Edit]根据下面的固定标记和您在注释中给出的/partial/badges.phtml代码查看此jsfiddle；很明显，你的全局css不在那里，但你可以看到它正确地将化身放在左边，将字形图标放在右边[/Edit]

您用这段代码生成的HTML似乎不太正确，并且考虑到您的问题只与HTML/css有关，最好将您的代码示例剥离为一段HTML+css，而不使用php逻辑。

据我所见，当内部if为真时，您的问题直接涉及主逻辑的else部分。在这种情况下，我相信你的代码会生成

<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. 您的pull-leftdiv在内部链接关闭之前关闭；里面的链接进一步关闭
2. div的open和close标记不匹配

我相信你想要的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混合在一起并不是很好，而且会导致出现更多类似的问题，最终无法生成您想象的标记。

附言：在界面上工作时，通常是一个很好的做法，首先在没有任何逻辑的情况下工作，只使用静态数据，以确保您得到想要和需要的标记，然后只将其与您的逻辑合并(但最好将您的逻辑与ui分离)