正確地將html div與css對齊

這可能是一個簡單的問題，但我很難理解我如何解決我的問題。正確地將html div與css對齊

我有一系列的div顯示用戶的聯繫方式。

當供給所有用戶聯繫人詳細信息，的詳細聯繫方式的顯示被正確地對準，這樣的：

enter image description here

然而，當只有部分的詳細聯繫方式被提供，該聯繫方式未正確對齊。這裏是一個預覽，在用戶沒有提供他們的電子郵件地址：

enter image description here

如何對齊的細節時，只有一些用戶的詳細信息是使用CSS供應嗎？我使用twitter bootstrap 2.3作爲響應式設計，所以我認爲span4（每行允許3個聯繫人詳細信息）會正確對齊，但不會。

我已經搜索了一個解決方案，但空白了。我已經嘗試了一些修復，但沒有任何我能想到的作品。

這裏是我的HTML：

<div class="resumeStyleStandardNacContactContainer25" dir="ltr" style="direction: ltr;"> 
    {{ #if contact_details_phone }} 
     <span class="span4 ellipsis" dir="ltr" style="direction: ltr;"> 
      <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;{{ contact_details_phone }} 
     </span> 
    {{ /if }} 
    {{ #if contact_details_mobile_phone }} 
     <span class="span4 ellipsis" dir="ltr" style="direction: ltr;"> 
      <i class="icon-phone icon_size20"></i>&nbsp;&nbsp;{{ contact_details_mobile_phone }} 
     </span> 
    {{ /if }} 
    {{ #if contact_details_email_address }} 
     <span class="span4 ellipsis" dir="ltr" style="direction: ltr;"> 
      <i class="icon-email icon_size20"></i>&nbsp;&nbsp;{{ contact_details_email_address }} 
     </span> 
    {{ /if }} 
    {{ #if contact_details_linkedin_address }} 
     <span class="span4 ellipsis" dir="ltr" style="direction: ltr;"> 
      <i class="icon-linkedin icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_linkedin_address }}</span> 
     </span> 
    {{ /if }} 
    {{ #if contact_details_facebook_address }} 
     <span class="span4 ellipsis" dir="ltr" style="direction: ltr;"> 
      <i class="icon-facebook icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_facebook_address }}</span> 
     </span> 
    {{ /if }} 
    {{ #if contact_details_twitter_address }} 
     <span class="span4 ellipsis" dir="ltr" style="direction: ltr;"> 
      <i class="icon-twitter icon_size20"></i>&nbsp;&nbsp;<span class="btu-link">{{ contact_details_twitter_address }}</span> 
     </span> 
    {{ /if }} 
</div>

這裏是我的CSS：

.resumeStyleStandardNacContactContainer25 { 
    padding-bottom: 1px; 
} 

.ellipsis { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

來源

2015-07-05 user1261774

你可以做一個JS小提琴或一些這樣的？您可能需要爲每個容器設置一個寬度，否則它會嘗試將所有內容推送到一起。沒有一個實際的例子就很難畫出來。抱歉。 –

第一步：不要使用' '作爲間隔，適當時使用'margin'或'padding'。 –

移動你的if聲明，你看到消失的塊中。但是，您需要計算需要的Bootstrap列的數量，而不是span4。

看起來像這樣會工作，但它會留下漏洞，並且沒有JSFiddle，我們無法完全確定。

例如;

<span class="span4 ellipsis" dir="ltr" style="direction: ltr;"> 
    {{ #if contact_details_phone }} 
    <i class="icon-phone icon_size20"></i>&nbsp;&nbsp; 
    {{ contact_details_phone }} 
    {{ /if }} 
</span>

一種其他的方式來做到這一點，是foreach循環每一個可能的接觸細節可能性（和喜歡的圖標和鏈接選項），檢查值存在，但同樣你可能需要計算span4應該是什麼。

來源

2015-07-06 00:08:16 vonUbisch

正確地將html div與css對齊

回答

相關問題