Question

我正在开发社交媒体网络，在我的帖子中，我正在尝试将Bootstrap 3中的glyphicons添加到帖子中。现在，我已经设置了与用户名相同的行上的图标，但我无法弄清楚如何首先获取用户名，然后是glyphicons。以下是我的代码：

<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

[编辑]根据下面的固定标记和您在评论中提供的/partial/badges.phtml代码，查看此jsfiddle;很明显你的全局css不在那里，但是你可以看到它正确地将头像留下并且将glyphicons放在它的右边[/ 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问题：

你的左拉 div在内部链接关闭之前关闭;
您的 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分开但是）

Div类订单问题

1 个答案: