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中分離出來）