这可能是一个简单的问题,但我对如何解决我的问题感到困惑。
我有一系列显示用户联系方式的div。
当提供所有用户的联系人详细信息时,联系人详细信息的显示将正确对齐,如下所示:
但是,当仅提供部分联系人详细信息时,联系人详细信息不会正确对齐。这里是一个预览,用户没有提供他们的电子邮件地址:
当使用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> {{ 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> {{ 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> {{ 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> <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> <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> <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;
}
最佳答案
将if
语句移到您所看到的消失的块中。
但是,您需要计算所需的引导列的数量,而不是span4
。
这看起来是可行的,但它会留下漏洞,没有JSFiddle我们不能完全确定。
例如;
<span class="span4 ellipsis" dir="ltr" style="direction: ltr;">
{{ #if contact_details_phone }}
<i class="icon-phone icon_size20"></i>
{{ contact_details_phone }}
{{ /if }}
</span>
另一种方法是,
foreach
循环每个可能的联系细节可能性(以及像图标和URL之类的选项),检查该值是否存在,但是你可能需要再次计算span4
应该是什么。